Skip to content

Instantly share code, notes, and snippets.

@sbellity

sbellity/quiz-selector.html

Last active December 24, 2015 09:38
Show Gist options
  • Save sbellity/6778192 to your computer and use it in GitHub Desktop.
Save sbellity/6778192 to your computer and use it in GitHub Desktop.
Download ZIP
Hull Quiz Selector wrapper
Raw
quiz-selector.html
<html>
<head>
<title>Quiz Selector</title>
<link rel="stylesheet" type="text/css" href="https://hullstrap.s3.amazonaws.com/stylesheets/hullstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//hull-js.s3.amazonaws.com/0.6.15/hull.js"></script>
<script type="text/javascript">
Hull.component('quiz-selector', {
templates: ['quiz-selector'],
datasources: {
achievements: 'app/achievements'
},
actions: {
selectQuiz: function(event, action) {
var quizId = action.data.quizId,
quiz = this.data.achievements.get(quizId);
if (quiz) {
// Add custom tracking call to record the User's select action
this.track("Start Quiz", { id: quiz.id, name: quiz.get("name") });
this.options.quizId = quiz.id;
this.render();
}
}
},
beforeRender: function(data) {
// Filter Achievement to only display achievement where type === 'quiz'
var filter = this.sandbox.util._.filter;
data.quizzes = filter(data.achievements, function(a) {
return a.type === 'quiz';
});
},
afterRender: function() {
// Add the 'active' class to the selected quiz in the list
if (this.options.quizId) {
this.$find('[data-hull-quiz-id="' + this.options.quizId + '"]').addClass('active');
}
}
});
</script>
<script type="text/javascript">
Hull.init({
orgUrl: 'https://hull-demos.hullapp.io',
appId: '512633779e3903afd4000020'
})
</script>
</head>
<body>
<div class="container" data-hull-component="quiz-selector"></div>
<script type="text/template" data-hull-template="quiz-selector/quiz-selector">
<div class="row">
<div class="span4">
<h4>Select a Quiz</h4>
<ul class="nav nav-pills nav-stacked quizzes-list">
{{#quizzes}}
<li data-hull-action="selectQuiz" data-hull-quiz-id="{{id}}"><a href="#">{{name}}</a></li>
{{/quizzes}}
</ul>
</div>
<div class="span8">
{{#if options.quizId}}
<div data-hull-component="quiz@hull" data-hull-id="{{options.quizId}}"></div>
{{else}}
<h2 class="well">Select a quiz to start playing...</h2>
{{/if}}
</div>
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment