First working version of QuestionSet
Frank Ronny Larsen
parent
0623eae79f
commit
ae4040f27a
|
|
@ -0,0 +1,136 @@
|
|||
// Will render a Question with multiple choices for answers.
|
||||
|
||||
// Options format:
|
||||
// {
|
||||
// title: "Optional title for question box",
|
||||
// question: "Question text",
|
||||
// answers: [{text: "Answer text", correct: false}, ...],
|
||||
// singleAnswer: true, // or false, will change rendered output slightly.
|
||||
// }
|
||||
window.H5P = window.H5P || {};
|
||||
|
||||
H5P.QuestionSet = function (options) {
|
||||
if ( !(this instanceof H5P.QuestionSet) )
|
||||
return new H5P.QuestionSet(options);
|
||||
|
||||
var texttemplate = '' +
|
||||
'<div class="questionset">' +
|
||||
' <h2 class="title"><%= title %></h2>' +
|
||||
' <% for (var i=0; i<questions.length; i++) { %>' +
|
||||
' <div class="question" id="q-<%= i %>">' +
|
||||
' <h1><%= questions[i].machineName %></h1>' +
|
||||
' </div>' +
|
||||
' <% } %>' +
|
||||
' <div class="question-footer">' +
|
||||
' <div class="progress">' +
|
||||
' <% if (progressType == "dots") { %>' +
|
||||
' <% for (var i=0; i<questions.length; i++) { %>' +
|
||||
' <span class="progress-dot unanswered" id="qdot-<%= i %>">o</span>' +
|
||||
' <%} %>' +
|
||||
' <% } else if (progressType == "textual") { %>' +
|
||||
' <span class="progress-current"></span>' +
|
||||
' of' +
|
||||
' <span class="progress-total"><%= questions.length %></span>' +
|
||||
' questions' +
|
||||
' <% } %>' +
|
||||
' </div>' +
|
||||
' <button class="prev button">Previous</button>' +
|
||||
' <button class="next button">Next</button>' +
|
||||
' <button class="finish button">Finish</button>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'';
|
||||
|
||||
var defaults = {
|
||||
title: "",
|
||||
randomOrder: false,
|
||||
initialQuestion: 0,
|
||||
progressType: 'textual',
|
||||
questions: []
|
||||
};
|
||||
|
||||
var template = new EJS({text: texttemplate});
|
||||
var params = jQuery.extend({}, defaults, options);
|
||||
|
||||
var currentQuestion = -1;
|
||||
var questionInstances = new Array();
|
||||
var allQuestionsAnswered = false;
|
||||
var myDom;
|
||||
|
||||
if (params.randomOrder) {
|
||||
// TODO: Randomize order of questions
|
||||
console.log("TODO: Randomize order of questions");
|
||||
}
|
||||
|
||||
var _showQuestion = function (questionNumber) {
|
||||
// Sanitize input.
|
||||
if (questionNumber < 0) { questionNumber = 0; }
|
||||
if (questionNumber >= params.questions.length) { questionNumber = params.questions.length - 1; }
|
||||
|
||||
$('.prev.button', myDom).attr({'disabled': (questionNumber === 0)});
|
||||
$('.next.button', myDom).attr({'disabled': (questionNumber == params.questions.length-1)});
|
||||
|
||||
// Hide all questions
|
||||
$('.question', myDom).hide();
|
||||
|
||||
// Reshow the requested question
|
||||
$('#q-' + questionNumber, myDom).show();
|
||||
|
||||
// Update progress indicator
|
||||
// Test if current has been answered.
|
||||
if (params.progressType == 'textual') {
|
||||
$('.progress-current', myDom).text("" + (questionNumber+1));
|
||||
} else {
|
||||
$('.progress-dot.current', myDom).removeClass('current');
|
||||
// Set answered/unanswered for current.
|
||||
$('#qdot-' + questionNumber, myDom).addClass('current');
|
||||
}
|
||||
|
||||
// Remember where we are
|
||||
currentQuestion = questionNumber;
|
||||
return currentQuestion;
|
||||
};
|
||||
|
||||
// Function for attaching the multichoice to a DOM element.
|
||||
var attach = function (targetId) {
|
||||
// Render own DOM into target.
|
||||
template.update(targetId, params);
|
||||
myDom = jQuery('#' + targetId);
|
||||
|
||||
// Attach questions
|
||||
for (var i=0; i<params.questions.length; i++) {
|
||||
var quest = params.questions[i];
|
||||
// TODO: Render on init, inject in template.
|
||||
var tmp = new (H5P.classFromName(quest.machineName))(quest.options).attach('q-' + i);
|
||||
questionInstances.push(tmp);
|
||||
}
|
||||
|
||||
// Set event listeners.
|
||||
$('.next.button', myDom).click(function() {
|
||||
_showQuestion(currentQuestion + 1);
|
||||
});
|
||||
$('.prev.button', myDom).click(function() {
|
||||
_showQuestion(currentQuestion - 1);
|
||||
});
|
||||
|
||||
// Hide all but initial Question.
|
||||
_showQuestion(params.initialQuestion);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var getScore = function () {
|
||||
var score = 0;
|
||||
for (var i = questionInstances.length - 1; i >= 0; i--) {
|
||||
score += questionInstances[i].getScore();
|
||||
}
|
||||
return score;
|
||||
};
|
||||
|
||||
return {
|
||||
attach: attach, // Attach to DOM object
|
||||
getQuestions: function () {return questionInstances;},
|
||||
getScore: getScore,
|
||||
defaults: defaults // Provide defaults for inspection
|
||||
};
|
||||
};
|
||||
35
schema.json
35
schema.json
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"title": {
|
||||
"name": "Title",
|
||||
"description": "Question set title (optional)",
|
||||
"type": "text",
|
||||
"default": ""
|
||||
},
|
||||
"randomOrder": {
|
||||
"name": "Randomize order",
|
||||
"description": "Whether questions should be shown in random order",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"initialQuestion": {
|
||||
"name": "Initial question",
|
||||
"description": "Which question to start with. Count from 0",
|
||||
"type": "integer",
|
||||
"default": 0
|
||||
},
|
||||
"progressType": {
|
||||
"name": "Progress indicator",
|
||||
"description": "Question set progress indicator style",
|
||||
"type": "select",
|
||||
"values": [{"text": "Textual", "value": "textual"}, {"text": "Dots", "value": "dots"}],
|
||||
"default": "textual"
|
||||
},
|
||||
"questions": {
|
||||
"name": "Questions",
|
||||
"description": "List of questions in this set.",
|
||||
"type": "h5p-library",
|
||||
"array": true,
|
||||
"minEntries": 1,
|
||||
"maxEntries": -1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="questionset">
|
||||
<h2 class="title"><%= title %></h2>
|
||||
<% for (var i=0; i<questions.length; i++) { %>
|
||||
<div class="question" id="q-<%= i %>">
|
||||
<h1><%= questions[i].machineName %></h1>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="question-footer">
|
||||
<div class="progress">
|
||||
<% if (progressType == "dots") { %>
|
||||
<% for (var i=0; i<questions.length; i++) { %>
|
||||
<span class="progress-dot unanswered" id="qdot-<%= i %>">o</span>
|
||||
<%} %>
|
||||
<% } else if (progressType == "textual") { %>
|
||||
<span class="progress-current"></span>
|
||||
of
|
||||
<span class="progress-total"><%= questions.length %></span>
|
||||
questions
|
||||
<% } %>
|
||||
</div>
|
||||
<button class="prev button">Previous</button>
|
||||
<button class="next button">Next</button>
|
||||
<button class="finish button">Finish</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue