FaSTTUBe/fs-quiz-tool
46
1
Fork 0
Code Issues 5 Pull Requests Releases Wiki Activity

Finalize answer display, explanations and authors still tbd

Browse Source
This commit is contained in:
Oskar Winkels
2021-01-17 14:12:32 +01:00
parent a0d550d55f
commit b0506a0377
2 changed files with 55 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/quiz.js
View File

@ -270,23 +270,41 @@ function showQuizResults() {
var quizForm = document.querySelector('#quiz form') var quizForm = document.querySelector('#quiz form')
quizForm.className = '' quizForm.className = ''
console.log('Showing quiz results...')
changeView('quiz')
for (var [idx, value] of state.responses.entries()) { for (var [idx, value] of state.responses.entries()) {
console.log(idx+':', value) console.log(idx + ':', value)
var el = document.getElementById('question' + idx) var el = document.getElementById('question' + idx)
console.log(el) // Mark question correct or incorrect
el.classList.add(value.correct ? 'correct' : 'incorrect')
var a = value.answers // traverse correct answers
if (value.correct) { if (state.questions[idx].type == 'Text') {
el.classList.add('correct') for (var [i, ans] of state.questions[idx].answers.entries()) {
var inp = el.querySelectorAll('input')[i]
if (inp.value == ans)
inp.classList.add('right')
else {
var note = document.createElement('p')
note.innerHTML = ans
inp.parentElement.appendChild(note)
}
}
} else { } else {
el.classList.add('incorrect') for (var ans of state.questions[idx].answers)
el.querySelector(`input[value="${ans}"]`).classList.add('trueans')
} }
// TODO: Write out explanation, author
} }
changeView('quiz') document.querySelector('#quizSubmitButton').innerHTML = 'Back'
} }
@ -332,7 +350,7 @@ function submitQuiz() {
var value = responses['q'+idx] || {answers: [], correct: false} var value = responses['q'+idx] || {answers: [], correct: false}
console.log(idx + ": " + value) console.log(idx + ":", value)
if (state.questions[idx].type == 'ChooseOne' || state.questions[idx].type == 'ChooseAny') { if (state.questions[idx].type == 'ChooseOne' || state.questions[idx].type == 'ChooseAny') {
state.questions[idx].answers.sort() state.questions[idx].answers.sort()

32
web/style.css
View File

@ -115,11 +115,11 @@ input[type="radio"] + p, input[type="checkbox"] + p {
border-radius: 3px; border-radius: 3px;
} }
input[type="radio"]:checked + p { input[type="radio"]:checked + p, input[type="checkbox"]:checked + p {
background: #aaf; background: #ddf;
} }
input[type="radio"]:hover + p { input[type="radio"]:hover + p, input[type="checkbox"]:hover + p {
background: #ddd; background: #ddd;
} }
@ -131,6 +131,11 @@ input[type="radio"]:hover + p {
display: none; display: none;
} }
.question.correct label, .question.incorrect label,
.question.correct input, .question.incorrect input {
pointer-events: none !important;
}
.question.correct h3, .question.correct h4 { .question.correct h3, .question.correct h4 {
color: #008800; color: #008800;
} }
@ -138,3 +143,24 @@ input[type="radio"]:hover + p {
.question.incorrect h3, .question.incorrect h4 { .question.incorrect h3, .question.incorrect h4 {
color: #BB0000; color: #BB0000;
} }
.question input.trueans + p {
color: #008800;
}
.question.incorrect input:checked:not(.trueans) + p {
color: #BB0000;
}
.question input.right {
color: #008800;
}
.question.incorrect input:not(.right) {
color: #BB0000;
}
.question.incorrect input[type="text"]:not(.right) + p {
margin-top: 0;
color: #008800;
}