Hi all
Im building a multi choice question quiz in javascript. It works, but the user can lok at teh source code and see the answers.
Heres the code so far:
(function(){
function buildQuiz(){
const output = [];
// for each question...
myQuestions.forEach(
(currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers){
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
output.push(
`<div class="slide">
<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
}
);
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join('');
}
function showResults(){
const answerContainers = quizContainer.querySelectorAll('.answers');
let numCorrect = 0;
// for each question...
myQuestions.forEach( (currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === currentQuestion.correctAnswer){
numCorrect++;
answerContainers[questionNumber].style.color = '#5cb85c';
}
else{
answerContainers[questionNumber].style.color = 'red';
}
});
resultsContainer.innerHTML = `You scored: ${numCorrect} out of ${myQuestions.length}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if(currentSlide === 0){
previousButton.style.display = 'none';
}
else{
previousButton.style.display = 'inline-block';
}
if(currentSlide === slides.length-1){
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
}
else{
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [
{
question: "1. Approximately what percentage of genetically confirmed monogenic diabetes are initially misdiagnosed as T1D or T2D?",
answers: {
a: "50%",
b: "60%",
c: "70%",
d: ">80%"
},
correctAnswer: "d"
},
{
question: "2. Why is it important to correctly diagnosis MODY?",
answers: {
a: "Ensures optimal treatment for patients",
b: "Ensures appropriate follow up for family members",
c: "Improves quality of patient lives",
d: "Reduces costs to the NHS",
e: "All of the above"
},
correctAnswer: "e"
},
{
question: "Which of the following is NOT a reason that MODY is missed in the UK?",
answers: {
a: "Discriminating MODY is challenging due to the lack of any single clinical feature to definitively distinguish from other forms of diabetes",
b: "Clinical training for the diagnosis of MODY has previously been poor",
c: "Technical issues with genetic testing ",
d: "Diagnostic classification is the most challenging at diagnosis of diabetes"
},
correctAnswer: "c"
}
];
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(currentSlide);
submitButton.addEventListener('click', showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
How can I hide the correctAnswer variables? I presume using ajax?
Thanks