1

I am trying to creaet a quizz with multiple choice questions. I am using EJS variables to display the Question,Correct Answer and Other 3 wrong options. It will diplay somewhat like this.

Question: How many centimeters in one meter?

  1. 100cm
  2. 50cm
  3. 20cm
  4. 10cm

and variables are something like this (I use a for loop to display all questions )

<%=Quizz[i].Question%>
<%=Quizz[i].Right_Answer%>
<%=Quizz[i].Wrong_Answer_1%>
<%=Quizz[i].Wrong_Answer_2%>
<%=Quizz[i].Wrong_Answer_3%>

So the problem i have is that i want to suffle and change the postion of the right answer for each question. so for one question it will be the first option and for another question right answer may be the 3rd option etc.Is there a way to achive this?

Manohara
  • 35
  • 1
  • 7

2 Answers2

1

Pass the values in the EJS variables to a separate javascript function and then shuffle it there. It's preferable to setup this on the server side, since the logic should be done at the controller, it's not a view job.

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

let answers = [
   Quizz[i].Right_Answer,
   Quizz[i].Wrong_Answer_1,
   Quizz[i].Wrong_Answer_2,
   Quizz[i].Wrong_Answer_3
];

shuffle(answers);
// answers are shuffled
Erick Petrucelli
  • 14,386
  • 8
  • 64
  • 84
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
  • you mean passing the values in the ejs variables to a separate javascript function and then suffle it there? – Manohara May 20 '20 at 10:14
  • If I process let's say around 100 questions or so, will this be faster than doing this on the server side? – Manohara May 20 '20 at 10:49
  • It's preferable to setup this on the server side of course. But: Your Ejs is performed on the server side no ? whatever, the logic should be done at the controller, it's not a view job. – BENARD Patrick May 20 '20 at 10:52
1

How about keeping the answers in a separate array, shuffling this array on the server-side and passing this array to ejs where you just iterate over the array? Here's some pseudo-code which should help you get started:

// in your node request handler
// shuffle is taken from https://stackoverflow.com/a/12646864/3761628
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}
...
const answers = [{isCorrectAnswer:true},{isCorrectAnswer:false},{isCorrectAnswer:false},{isCorrectAnswer:false}];

shuffle(answers);
// pass the question and the answers to ejs
res.render('...', {question, answers});

// in your ejs:

 <%=question%>
 <% answers.forEach(function(item,index){ %>
            <li> <%= item %> </li>
 <% }) %>
eol
  • 23,236
  • 5
  • 46
  • 64
  • Actaully I also thought about this, but since i am displaying more than 1 question at once i am kind of confused about how to link the questions and answers if i put them in separate arrays. Any suggetions? – Manohara May 20 '20 at 10:11
  • @Manohara You're almost there. Just replace properties `Quizz[i].Wrong_Answer_1`, `Quizz[i].Wrong_Answer_2` etc with `Quizz[i].Answer[j]`. Keep the `Right_Answer` property because you need to check your answers against it – slebetman May 20 '20 at 10:20