Я буду использовать ваш существующий стиль кодирования в этом решении, чтобы вы могли легко увидеть, как эти правки решают вашу проблему.
Но обратите внимание, что вы действительно могли бы выиграть, используя больше циклов, чтобы вы не повторяют один и тот же код, условные выражения и присваивания снова и снова в исходном коде.
Основные изменения здесь заключаются в том, что код изменения цвета теперь является функцией. Кроме того, я исправил логическую ошибку, из-за которой повторение того же правильного ответа и выбор сохранения привели бы к ошибочному увеличению count снова.
Я разместил комментарии в вашем источнике, чтобы показать, где и какие изменения я внес.
var questions = [
["q1", "1", "2", "3", "4", "5", "A", "not"],
["q2", "10", "20", "30", "40", "50", "B", "not"],
["q3", "10", "20", "30", "40", "50", "C", "not"],
["q4", "10", "20", "30", "40", "50", "D", "not"]
];
var pos = 0,
choice, correct = 0,
rscore = 0;
window.onload = function() {
qus();
// setQuestionOrder()
}
function qus() {
document.getElementById("question").innerHTML = questions[pos][0];
document.getElementById("c1").innerHTML = questions[pos][1];
document.getElementById("c2").innerHTML = questions[pos][2];
document.getElementById("c3").innerHTML = questions[pos][3];
document.getElementById("c4").innerHTML = questions[pos][4];
document.getElementById("c5").innerHTML = questions[pos][5];
}
function next() {
var choices = document.getElementsByName("choices");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
questions[pos][7] = choice;
updateAnswerHinting(); // Do your answer hinting (history) in this next function
// Get rid of incrementing correct because if a user revisits an answer and
// chooses save then it will get incremented again if were correct
/*
if (choice == questions[pos][6]) {
correct++;
// alert('correct');
} else {
//alert('incorrect');
}
*/
if (pos + 1 >= questions.length) {
var r = confirm("Submit test?", );
if (r == true) {
// Calculate correct since we are no longer tallying it as we go
correct = 0;
for (var i = 0; i < questions.length; i++) {
if (questions[i][USER_CHOICE] == questions[i][Q_ANSWER]) correct++;
}
document.write("You got " + correct + " correct of " + questions.length + " questions<br><br>");
correct = "0";
pos = "0";
} else {
}
return false;
} else {
pos++;
//console.log(pos, questions.length);
qus();
check();
}
}
function uncheck() {
// You can use a loop for this. Consider using this technique for other parts of your code
for (var i = 0; i < 5; i++) {
document.getElementById("r" + (i + 1)).checked = false;
}
/*
document.getElementById("r1").checked = false;
document.getElementById("r2").checked = false;
document.getElementById("r3").checked = false;
document.getElementById("r4").checked = false;
document.getElementById("r5").checked = false;
*/
}
function check() {
if (questions[pos][7] == "A") {
document.getElementById("r1").checked = true;
} else if (questions[pos][7] == "B") {
document.getElementById("r2").checked = true;
} else if (questions[pos][7] == "C") {
document.getElementById("r3").checked = true;
} else if (questions[pos][7] == "D") {
document.getElementById("r4").checked = true;
} else if (questions[pos][7] == "E") {
document.getElementById("r5").checked = true;
} else {
uncheck();
}
}
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
function qx(p) {
// p is Base 1 (starts from 1)
pos = p - 1;
qus();
check();
}
// These functions are no longer needed since we now have qx()
/*
function q1() {
pos = 0;
qus();
check();
}
function q2() {
pos = 1;
qus();
check();
}
function q3() {
pos = 2;
qus();
check();
}
function q4() {
pos = 3;
qus();
check();
}
*/
/// CODE TO CHANGE COLOR
const USER_CHOICE = 7;
const Q_ANSWER = 6;
function updateAnswerHinting() {
for (var i = 0; i < questions.length; i++) {
var color = "white";
if (questions[i][USER_CHOICE] == questions[i][Q_ANSWER]) {
color = "green";
} else if (questions[i][USER_CHOICE] != "not") {
color = "red";
}
// To prevent future logical errors, check if element exists
var el = document.getElementById("q" + (i + 1));
if (el) el.style = "background-color:" + color;
}
}
// This code was out of place anyway
/*
if (questions[0][7] == "A" || "B" || "C" || "D" || "E") {
document.getElementById("q1").style = "background-color:green;"
}
else if (questions[1][7] == "not") {
document.getElementById("q2").style = "background-color:white;"
}
else {
document.getElementById("q1").style = "background-color:red;"
}
if (questions[1][7] == "A" || "B" || "C" || "D" || "E") {
document.getElementById("q2").style = "background-color:green;"
}
else if (questions[1][7] == "not") {
document.getElementById("q2").style = "background-color:white;"
}
else {
document.getElementById("q2").style = "background-color:red;"
}
*/
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button class="w3-button w3-light-grey w3-large w3-right" onclick="w3_open() "><i class="fa fa-bars"></i></button>
<div class="w3-sidebar w3-bar-block w3-border-left top" style="display:block; width:10%; right:0;" id="mySidebar">
<button onclick="w3_close()" class="w3-bar-item large">Close ×</button>
<a href="#" onclick="qx(1)" class="w3-bar-item w3-button " id="q1"> 1</a>
<a href="#" onclick="qx(2)" class="w3-bar-item w3-button" id="q2"> 2</a>
<a href="#" onclick="qx(3)" class="w3-bar-item w3-button" id="q3"> 3</a>
<a href="#" onclick="qx(4)" class="w3-bar-item w3-button" id="q4"> 4</a>
</div>
<label class="xxlarge" id="question">
</label><br><br>
<input type="radio" name="choices" value="A" id="r1" class="radio"><label id="c1"></label><br><br>
<input type="radio" name="choices" value="B" id="r2" class="radio"><label id="c2"></label> <br><br>
<input type="radio" name="choices" value="C" id="r3" class="radio"><label id="c3"></label><br><br>
<input type="radio" name="choices" value="D" id="r4" class="radio"><label id="c4"></label><br><br>
<input type="radio" name="choices" value="E" id="r5" class="radio"><label id="c5"></label>
<br>
<br>
<br>
<button onclick="next()" class="btn green round">Save & Next</button>
</body>
Также обратите внимание, хотя логически это необязательно, я создал эти константы, чтобы сделать ваш источник более читабельным и более готовым к будущим изменениям:
const USER_CHOICE = 7;
const Q_ANSWER = 6;
Это индексы к вашему массиву вопросов, которые будут использоваться вместо литералов. Я использовал их там, где помещал код. Рассмотрите возможность использования их для остальной части вашего кода.