Skip to content
Snippets Groups Projects
Commit c09287a1 authored by Eliott Sammier's avatar Eliott Sammier
Browse files

Add answer checking to gap-fill question type

parent ba689d08
No related branches found
No related tags found
No related merge requests found
......@@ -22,33 +22,44 @@ let gapfillSelectWidget = {
Survey.Serializer.addClass(this.name, [], null, "empty");
},
/** Static HTML template rendered by SurveyJS */
htmlTemplate:
'<p id="gapfill-container"><template id="template-select"><select class="my-custom-class"><option selected/></select></template></p>',
//Our element will be rendered base on template.
//We do not need to do anything here
htmlTemplate: '<p id="gapfill-container"><template id="template-select"><select class="my-custom-class"><option selected/></select></template></p>',
/**
* Function called after the HTML template is rendered. This time we actually have the `question` object
* and the `el` element, to build the question according to the JSON
*/
afterRender: function (question, el) {
// The gap-fill text is made of segments, which are either plain pieces
// of text (strings) or "gaps" with a few options to select (string arrays).
// We append these to build the text, turning strings into <span>s and
// gaps into <select>s
let nbGaps = 0;
for (segment of question.jsonObj.segments) {
if (typeof segment === 'string' || segment instanceof String) {
segmentElem = document.createElement("span");
segmentElem.innerText = segment;
} else if (segment instanceof Array) {
// Get the <select> element
// It's a gap
// Create the <select> element
segmentElem = document.getElementById("template-select").content.firstChild.cloneNode(true);
segmentElem.setAttribute("data-index", nbGaps); // The node knows its index
// Create and append options
for (opt of segment) {
optionElem = document.createElement("option");
optionElem.innerText = opt;
segmentElem.appendChild(optionElem);
}
// Add listener to update the question's value when the selector's value changes
segmentElem.addEventListener("change", (e) => {
// The select node knows its index, therefore is able to update the question value at the correct index
this.question.value[parseInt(e.target.getAttribute("data-index"))] = e.target.value;
});
nbGaps++;
}
// Add segment
el.appendChild(segmentElem);
}
}
question.value = new Array(nbGaps);
},
};
......
......@@ -30,6 +30,12 @@
"for the"
],
" winter-time'."
],
"correctAnswer": [
"my mother",
"the apples",
"the tree",
"for the"
]
}
]
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment