Random array update

Question

I have an array in which two values are compared in a random order. How do i update the values? Help, if not hard.

 $(document).ready(function() { var myArray = [{ "q1": "a", "an": "a" }, { "q1": "b", "an": "b" }, { "q1": "c", "an": "c" }]; var rand = Math.floor(Math.random() * myArray.length); $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>"); $("#btn").click(function() { var answer = $("#answer").val(); if (answer == myArray[rand].an) { $("#comment").html("<div>" + "OK!" + "</div>"); } else { $("#comment").html("<div>" + "NO!" + "</div>"); } $("#answer").val(''); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrap"> <div id="question"></div> <input id="answer" /> <div id="comment"></div> <button id="btn">Button</button> </div>

Answer 1

<div id="wrap">
    <div id="question"></div>
    <input id="answer" />
    <div id="comment"></div>
    <button id="btn">Button</button>
    <button id="next">Next</button>
  </div>

JS

$(document).ready(function() {
    var myArray = [{
      "q1": "a",
      "an": "a"
    }, {
      "q1": "b",
      "an": "b"
    }, {
      "q1": "c",
      "an": "c"
    }];
    var rand = Math.floor(Math.random() * myArray.length);
    $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>");
    $("#btn").click(function() {
      var answer = $("#answer").val();
      if (answer == myArray[rand].an) {
        $("#comment").html("<div>" + "OK!" + "</div>");
      } else {
        $("#comment").html("<div>" + "NO!" + "</div>");
      }
      $("#answer").val('');
    });
  $("#next").click(function(){

   var newRand =rand;
   while(rand==newRand)
   {
     newRand = Math.floor(Math.random() * myArray.length);
   }
rand =newRand;
    $("#question").html("<div id='text'>" + myArray[newRand].q1 + "</div>");
  });
});

Here is the Fiddle https://jsfiddle.net/eax8cvwn/

Answer 2

You can access the array values like this:

myArray[0].an = 'new value';

Where 0 is the "row" in your array.

Answer 3

You need to reset your random value after button click. So put below line inside button click.

rand = Math.floor(Math.random() * myArray.length);
$("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>");

 $(document).ready(function() { var myArray = [{ "q1": "a", "an": "a" }, { "q1": "b", "an": "b" }, { "q1": "c", "an": "c" }, { "q1": "d", "an": "d" }, { "q1": "e", "an": "e" }]; var rand = Math.floor(Math.random() * myArray.length); $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>"); $("#btn").click(function() { var answer = $("#answer").val(); if (answer == myArray[rand].an) { $("#comment").html("<div>" + "OK!" + "</div>"); } else { $("#comment").html("<div>" + "NO!" + "</div>"); } $("#answer").val(''); rand = Math.floor(Math.random() * myArray.length); $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrap"> <div id="question"></div> <input id="answer" /> <div id="comment"></div> <button id="btn">Button</button> </div>

Answer 4

push the newly generated random number into a array and check if it exists using indexOf and generate new random number. and check if all questions answered using question's array length and random number array length and complete the quiz.

Try like this

 $(document).ready(function() { var myArray = [{ "q1": "a", "an": "a" }, { "q1": "b", "an": "b" }, { "q1": "c", "an": "c" }]; var rand = Math.floor(Math.random() * myArray.length); $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>"); var askedQtn = []; askedQtn.push(rand); $("#btn").click(function() { var answer = $("#answer").val(); if (answer == myArray[rand].an) { $("#comment").html("<div>" + "OK!" + "</div>"); } else { $("#comment").html("<div>" + "NO!" + "</div>"); } $("#answer").val(''); var newRand =rand; if(myArray.length <= askedQtn.length){ $("#wrap").html("<div id='text'>Questions Over</div>"); } else { while(askedQtn.indexOf(rand) >= 0) { rand = Math.floor(Math.random() * myArray.length); } askedQtn.push(rand); $("#question").html("<div id='text'>" + myArray[rand].q1 + "</div>"); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrap"> <div id="question"></div> <input id="answer" /> <div id="comment"></div> <button id="btn">Button</button> </div>