63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
import { esc, sanitizeHtml } from './sanitize.js';
|
|
|
|
export function renderQuizQuestions(questions) {
|
|
return (questions || []).map(function(q, idx) {
|
|
var isMulti = q.question_type === 'multi';
|
|
var typeLabel = q.question_type === 'true_false' ? 'True / False'
|
|
: isMulti ? 'Multiple Select'
|
|
: 'Single Choice';
|
|
var inputType = isMulti ? 'checkbox' : 'radio';
|
|
var nameAttr = isMulti ? 'lh-qm-' + q.id : 'lh-q-' + q.id;
|
|
var hint = isMulti ? '<div class="lh-quiz-multi-hint">Select all that apply</div>' : '';
|
|
|
|
return '<div class="lh-quiz-q" data-qid="' + q.id + '" data-qtype="' + q.question_type + '">' +
|
|
'<div class="lh-quiz-q-header">' +
|
|
'<span class="lh-quiz-q-num">Q' + (idx + 1) + '</span>' +
|
|
'<span class="lh-quiz-q-type">' + typeLabel + '</span>' +
|
|
'</div>' +
|
|
'<p class="lh-quiz-q-text">' + sanitizeHtml(q.question_text) + '</p>' +
|
|
hint +
|
|
'<div class="lh-quiz-options">' + renderQuizOptions(q.options, inputType, nameAttr) + '</div>' +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
export function renderQuizResultExplanations(results) {
|
|
return (results || []).map(function(r, idx) {
|
|
var icon = r.isCorrect
|
|
? '<i class="fas fa-check-circle" style="color:var(--green);"></i>'
|
|
: '<i class="fas fa-times-circle" style="color:var(--red);"></i>';
|
|
var explHtml = '';
|
|
if (!r.isCorrect && r.selectedExplanation) {
|
|
explHtml += '<div class="lh-expl lh-expl-wrong"><strong>Why incorrect:</strong> ' +
|
|
esc(r.selectedExplanation) +
|
|
'</div>';
|
|
}
|
|
if (!r.isCorrect) {
|
|
explHtml += '<div class="lh-expl lh-expl-correct"><strong>Correct answer:</strong> ' +
|
|
esc(r.correctOptionText) +
|
|
'</div>';
|
|
}
|
|
if (r.generalExplanation) {
|
|
explHtml += '<div class="lh-expl lh-expl-general"><strong>Explanation:</strong> ' +
|
|
sanitizeHtml(r.generalExplanation) +
|
|
'</div>';
|
|
}
|
|
|
|
return '<div class="lh-result-item">' +
|
|
'<div class="lh-result-header">' +
|
|
icon + ' <strong>Q' + (idx + 1) + ':</strong> ' + sanitizeHtml(r.questionText) +
|
|
'</div>' +
|
|
explHtml +
|
|
'</div>';
|
|
}).join('');
|
|
}
|
|
|
|
function renderQuizOptions(options, inputType, nameAttr) {
|
|
return (options || []).map(function(opt) {
|
|
return '<label class="lh-quiz-option">' +
|
|
'<input type="' + inputType + '" name="' + nameAttr + '" value="' + opt.id + '">' +
|
|
'<span>' + sanitizeHtml(opt.option_text) + '</span>' +
|
|
'</label>';
|
|
}).join('');
|
|
}
|