Здравствуйте!
У меня есть программа теста. Как мне сделать так, чтобы вопросы каждый раз были в разном порядке?
<h2>Тестирование</h2>
<div class="jumbotron"> <hr />
<div id="question1" style=" display:block;">
<p>Вопрос 1</p>
<p><span id="quest_1"></span> <input type="text" onkeyup="check();" id="answer_1"></p></div>
<div id="question2" style=" display:none;">
<p>Вопрос 6</p>
<p><span id="quest_2"></span> <input type="text" onkeyup="check();" id="answer_2"></p> </div>
<div id="question3" style=" display:none;">
<p>Вопрос 3</p>
<p><span id="quest_3"></span> <input type="text" onkeyup="check();" id="answer_3"></p></div>
<div id="question4" style=" display:none;">
<p>Вопрос 4</p>
<p>
<span id="quest_4"></span><br />
<input type="radio" name="q_4" value="1" onkeyup="check();" id="answer_4" /><span>ответ1</span><br>
<input type="radio" name="q_4" value="0" onkeyup="check();" id="answer_4" /><span>ответ2</span><br>
<input type="radio" name="q_4" value="0" onkeyup="check();" id="answer_4" /><span>ответ3</span> </p></div>
<div id="question9" style=" display:none;">
<p>Вопрос 5</p>
<p><span id="quest_5"></span><br />
<input type="radio" name="q_5" value="1" onkeyup="check();" id="answer_5" /><span> ответ1</span><br>
<input type="radio" name="q_5" value="0" onkeyup="check();" id="answer_5" /><span>ответ2</span><br>
<input type="radio" name="q_5" value="0" onkeyup="check();" id="answer_5" /><span> ответ3</span></p></div>
<div id="question6" style=" display:none;">
<button id="but_next" class="btn btn-default" disabled="disabled" onclick="next_question();">Следующий вопрос</button>
<button id="but_verify" style="display:none;" class="btn btn-default" onclick="verify();">Проверить</button>
<div id="rezult"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('quest_1').innerHTML = question_1;
document.getElementById('quest_2').innerHTML = question_2;
document.getElementById('quest_3').innerHTML = question_3;
document.getElementById('quest_4').innerHTML = question_4;
document.getElementById('quest_5').innerHTML = question_5;
})
function next_question() {
if (document.getElementById('question5').style.display == "block") {
document.getElementById('question5').style.display = "none";
document.getElementById('question6').style.display = "block";
document.getElementById('but_next').disabled = true;
document.getElementById('but_next').style.display = "none";
document.getElementById('but_verify').style.display = "block";
}
if (document.getElementById('question4').style.display == "block") {
document.getElementById('question4').style.display = "none";
document.getElementById('question5').style.display = "block";
document.getElementById('but_next').disabled = true;
}
if (document.getElementById('question3').style.display == "block") {
document.getElementById('question3').style.display = "none";
document.getElementById('question4').style.display = "block";
document.getElementById('but_next').disabled = true;
}
if (document.getElementById('question2').style.display == "block") {
document.getElementById('question2').style.display = "none";
document.getElementById('question3').style.display = "block";
document.getElementById('but_next').disabled = true;
}
if (document.getElementById('question1').style.display == "block") {
document.getElementById('question1').style.display = "none";
document.getElementById('question2').style.display = "block";
document.getElementById('but_next').disabled = true;
}
}
function check() {
if ($('input[id^="answer_"]').val() != '')
$('#but_next').removeAttr('disabled');
else $('#but_next').attr('disabled', 'disable');
$("input[type=radio]").on("change", function () {
$("button").prop("disabled", false);
});
}
function verify() {
answ_1 = document.getElementById('answer_1').value;
answ_student_1 = answ_1;
answ_1 = kodirov(answ_1);
answ_2 = document.getElementById('answer_2').value;
answ_student_2 = answ_2;
answ_2 = kodirov(answ_2);
answ_3 = document.querySelector('input[id="answer_3"]:checked').value;
answ_student_3 = document.querySelector('input[id="answer_3"]:checked').nextElementSibling.innerText;
answ_4 = document.querySelector('input[id="answer_4"]:checked').value;
answ_student_4 = document.querySelector('input[id="answer_4"]:checked').nextElementSibling.innerText;
answ_5 = document.querySelector('input[id="answer_5"]:checked').value;
answ_student_5 = document.querySelector('input[id="answer_5"]:checked').nextElementSibling.innerText;
count = 0;
count_theory = 0;
count_practice = 0;
ball = 0;
document.getElementById('question10').style.display = "none";
document.getElementById('but_verify').style.display = "none";
if (answ_1 == correct_answer_1) {
count++;
all_answers += "<br><span id='vo'>Вопрос 1." + question_1 + "<br>Ваш ответ: " + answ_student_1 + "<br>Вы ответили верно" + "</span><br>";
} else {
all_answers += "<br><span id='nvo'>Вопрос 2.Вы ответили не верно" + "</span><br>";
}
if (answ_2 == correct_answer_2) {
count++;
all_answers += "<br><span id='vo'>Вопрос 2." + question_2 + "<br>Ваш ответ: " + answ_student_2 + "<br>Вы ответили верно" + "</span><br>";
} else {
all_answers += "<br><span id='nvo'>Вопрос 2.Вы ответили не верно" + "</span><br>";
}
if (answ_3 == correct_answer_3) {
count++;
all_answers += "<br><span id='vo'>Вопрос 3." + question_3 + "<br>Ваш ответ: " + answ_student_3 + "<br>Вы ответили верно" + "</span><br>";
} else {
all_answers += "<br><span id='nvo'>Вопрос 3.Вы ответили не верно" + "</span><br>";
}
if (answ_4 == '1') {
count++;
all_answers += "<br><span id='vo'>Вопрос 4." + question_4 + "<br>Ваш ответ: " + answ_student_4 + "<br>Вы ответили верно" + "</span><br>";
} else {
all_answers += "<br><span id='nvo'>Вопрос 4.Вы ответили не верно" + "</span><br>";
}
if (answ_5 == '1') {
count++;
all_answers += "<br><span id='vo'>Вопрос 5." + question_5 + "<br>Ваш ответ: " + answ_student_5 + "<br>Вы ответили верно" + "</span><br>";
} else {
all_answers += "<br><span id='nvo'>Вопрос 5.Вы ответили не верно" + "</span><br>";
}
total = 5;
procent_total = count / total * 100;
procent_total = procent_total.toFixed();
document.getElementById('rezult').innerHTML = "Вы набрали " + ball + " баллов из "+ total_ball + "<br>Задания выполнены верно на " + procent_total + " %. " +"</span > <br><div class='progress'><div class='progress-bar' role='progressbar' style='width: " + procent_total + "%' aria-valuenow='" + procent_total + "' aria-valuemin='0' aria-valuemax='100'></div></div><span id='ot'>" + "</span><br><br><br>" + all_answers;
}
</script>
сами вопросы и правильные ответы на те, которые типа text, хранятся в отдельном файле в переменных, например так:
question_1 = "Вопрос 1"
правильный ответ на вопросы типа radio помечены value="1"