JSFiddle - React, Tailwind, and code Playground

by Lazar N

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="quizz-form">
  <span id="quizz-title">Quizz text: </span>
  <p id="quizz-question-no"></p>
  <form>
    <input type="radio" name="quizz-opt" id="opt1" value="1">
    <label class="opt-txt" for="opt1" id="label1"></label>
    <br>
    <!--option 1 end-->
    <input type="radio" name="quizz-opt" id="opt2" value="2">
    <label class="opt-txt" for="opt2" id="label2"></label>
    <br>
    <!--option 2 end-->
    <input type="radio" name="quizz-opt" id="opt3" value="3">
    <label class="opt-txt" for="opt3" id="label3"></label>
    <br>
    <!--option 3 end-->
    <input type="radio" name="quizz-opt" id="opt4" value="4">
    <label class="opt-txt" for="opt4" id="label4"></label>
    <br>
    <!--option 4 end-->
    <button type="button">Dalje</button>
  </form>
  <div id="quizz-warn"></div>
</div>

JavaScript

$(document).ready(function() {
  var pitanja = [{
    "quNo": 1,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 2
  }, {
    "quNo": 2,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 4
  }, {
    "quNo": 3,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 2
  }, {
    "quNo": 4,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 4
  }, {
    "quNo": 5,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 1
  }, {
    "quNo": 6,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 3
  }, {
    "quNo": 7,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 2
  }, {
    "quNo": 8,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 1
  }, {
    "quNo": 9,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 4
  }, {
    "quNo": 10,
    "opt1": "a",
    "opt2": "b",
    "opt3": "c",
    "opt4": "d",
    "corrNo": 3
  }];

  //****************************************************//

  var corrTotal = 0; // total correct answers
  var qNumber = 0; // current question number
  var currentChoice = 0; //current answer choice

  function popuniPitanja(qNumber) {
    var qu = pitanja[qNumber]; //current question, by array index
    $("#quizz-question-no").text("Question " + qu["quNo"]);
    $("#label1").text(qu["opt1"]);
    $("#label2").text(qu["opt2"]);
    $("#label3").text(qu["opt3"]);
    $("#label4").text(qu["opt4"]);
  }

  function proveriOdgovor(choice, corr) { // choice is the selected value, corr is the current question correct value
    if (parseInt(choice) === corr) {
      corrTotal++;
    } //if selected and correct value match, increment total correct
  }

  function sacuvajIzbor() { //save user choice
    if ($("#opt1").prop("checked", true)) {
      currentChoice = 1
    };
    if...