How to hide answers in my js quiz?

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 buildQuiz(){
    const output = [];

    // for each question...
      (currentQuestion, questionNumber) => {

        const answers = [];

        for(letter in currentQuestion.answers){

              <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :

          `<div class="slide">
            <div class="question"> ${currentQuestion.question} </div>
            <div class="answers"> ${answers.join("")} </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){
        answerContainers[questionNumber].style.color = '#5cb85c';
        answerContainers[questionNumber].style.color = 'red';

    resultsContainer.innerHTML = `You scored: ${numCorrect} out of ${myQuestions.length}`;

  function showSlide(n) {
    currentSlide = n;
    if(currentSlide === 0){ = 'none';
    else{ = 'inline-block';
    if(currentSlide === slides.length-1){ = 'none'; = 'inline-block';
    else{ = 'inline-block'; = '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"


  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;


  submitButton.addEventListener('click', showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);

How can I hide the correctAnswer variables? I presume using ajax?


The html is

<div class="quiz-container">
  <div id="quiz"></div>
		<div style="text-align:center;margin:20px 0">
<button id="previous" class="btn btn-primary"><i class="fas fa-chevron-left"></i> Previous Question</button>
<button id="next" class="btn btn-primary">Next Question <i class="fas fa-chevron-right"></i></button>
<button id="submit" class="btn btn-success">Submit Quiz</button>
<div id="results"></div>

You would need to use some kind of backend server to hide the answers. With only HTML and JS it’s not possible to hide anything.

Im using php elsewhere on the site. But Im not sure how I can get my javascript code to interface with php.

The fetch API is a good way to achieve that.

Hi @bolton, well if the user actually looks at the source code they can as well figure out the required AJAX calls, and get the answers by sending these manually from the console… so if there is some sort of prize or achievement involved where cheating is an issue, I suppose your best bet would be to just collect the user answers, and finally submit everything like a regular form.

There is one possible way. Gather up each answer as a value, then encrypt it with a password. You can check if the resulting ciphertext matches the correct string.

For example at is a tiny encryption.
With a password of “quiz” and the answers of “abcdcdba” we get encrypted text of “uz2YZBKC0Dk=”

Each time you want to check if the quiz answers are right, just compare the encrypted result with “uz2YZBKC0Dk=”

It’s easy to check that the answers match, but virtually nobody can brute-force it back to the answers of “abcdcdba”.



You mean Hash it. Encryptions are two-way.

This methodology, by the way OP, is often how passwords are handled - hash at the sending end, compare to hashed value at the remote end, that way you’re never sending the password ‘in the clear’ at any point - the receiving end doesnt even know what the password IS, it just knows the hashed value.

1 Like

Thanks so much guys, very useful. Im going to have a play this weekend. Cheers!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.