JSFiddle - React, Tailwind, and code Playground

by Alexander Antonov

CSS

#quest{
    font-weight:bold;
    font-size:120%;
}
.answer input{
    margin:0 20px 0 0;
}
.answer{
    display:block;
    width:100%;
}
.answers{
    width:50%;
}

JavaScript

$("body").append($("<div id = \"questblock\"></div>"));
$("#questblock").append($("<button id=\"run\">Начать</button>"));
score = 0;
$("#run").bind("click",begin);

var queue = new Array ;
var curQ = 0;
var score = 0 ;
var questions = [//Массив объектов содержит вопросы сколько угодно
{//объект вопрос
    q: "Наименьшая еденица измерения иформации?",//q: "Вопрос"
    a: ["бит","байт","кБайт"],//a: [1,3,"q"] // массив ответов
    trueAnswer: 0//Индекс в массиве a, правильного ответа
},
{
    q: "Выберите язык программирования...",
    a: ["Javascript","HTML","CSS"],
    trueAnswer: 0
},
{
    q: "Что такое ПК?",
    a: ["Прибор калибровки","Персональный компьютер","Пожарный кран","Прикуриватель карманный"],
    trueAnswer: 1
}//И так далее можно добавлять сколько угодно
];

function begin(){
    score = 0;
    curQ = 0;
    queue = new Array;
    var tmp  = new Array;
    for(var i = 0; i < questions.length;i++)
        tmp.push(i)
    while(tmp.length > 0){
        var r = randNum(0, tmp.length);  
      queue.push(tmp[r]);
      tmp.splice(r,1); 
    }
     showQ();
}
function showQ(){
    var str = "<span id=\"quest\">"+questions[queue[curQ]].q+"</span><div class = \"answers\" >";
    $(questions[queue[curQ]].a).each(function(i,e){
        str+= "<label class=\"answer\"><input name = \"ans\" "+(i==0?"checked":"")+"  value = "+i+" type=\"radio\" >"+e+"</input> </label>";
    });
    str+="</div><button id=\"next\">Следующий</button>";   
    $("#questblock").html("");
    $("#questblock").append($(str));
    curQ++;
    
    $("#next").bind("click",function(){
        if($(".answer :checked").val() == questions[queue[curQ-1]].trueAnswer)
               score++;
        if(curQ >= questions.length){
              $("#questblock").html("");
            $("#questblock").append($("<span>Результат: "+score+" правильных из "+questions.length+"</span><br><button id=\"run\">Заново</button>"));
            $("#run").bind("click",begin);
        }
            else
       ...