Question

我需要以下代码的帮助，我在我的Javascript测验中创建了一个后退按钮，但如果我点击它，它会返回但不记得我选择的选项，从而迫使我选择一个新的答案。我不知道如何解决这个问题。以下是Javascript链接： http://jsbin.com/zinagipovo/edit?html,css,js,console

var currentQuestion = 0;
var score = 0;
var totQuestions = questions.length;

var container = document.getElementById('quizContainer');
var questionEl = document.getElementById('question');
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');
var backButton = document.getElementById('backButton');
var nextButton = document.getElementById('nextButton');
var resultCont = document.getElementById('result');

function loadQuestion (questionIndex) {
    var q = questions[questionIndex];
    questionEl.textContent = (questionIndex + 1) + '. ' +q.question;
    opt1.textContent = q.option1;
    opt2.textContent = q.option2;
    opt3.textContent = q.option3;
    opt4.textContent = q.option4;
};


function loadNextQuestion () {
    var selectedOption = 
document.querySelector('input[type=radio]:checked');
    if(!selectedOption){
        alert('Please select your answer!');
        return;
}

var answer = selectedOption.value;
if(questions[currentQuestion].answer == answer){
    score +=1;
}
selectedOption.checked = false;
currentQuestion++;
if(currentQuestion == totQuestions - 1){
    nextButton.textContent = 'Finish';
}
if (currentQuestion == totQuestions){
    resultCont.style.display = '';
    resultCont.textContent = 'You got ' + score +' questions correct';
    return false;
    currentQuestion = 0;
}
loadQuestion(currentQuestion);
}

function loadPrevQuestion () {

    if (currentQuestion > 0) {
        currentQuestion--;
        loadQuestion(currentQuestion);
}

}

loadQuestion(currentQuestion);

问题在外部文件中

    var questions = [{
    "question": "How many long vowels do we have in English Language?",
    "option1": "10",
    "option2": "5",
    "option3": "6",
    "option4": "7",
    "answer": "2"
}, {
    "question": "How many short vowels do we have in English Language?",
    "option1": "6",
    "option2": "5",
    "option3": "12",
    "option4": "7", 
    "answer": "4"
}, {
    "question": "How many Vowels do we have in English Language?",
    "option1": "20",
    "option2": "24",
    "option3": "8",
    "option4": "12",
    "answer": "1"
},  {
    "question":"Which of these is not a Vowel Sound?",
    "option1": "/θ/",
    "option2": "/əʊ/",
    "option3": "/i:/",
    "option4": "/u:/",
    "answer": "1"
}, 

]

HTML代码如此：

    <div>
    <button id="quiz" onclick="document.getElementById('quizContainer').style.display='block'" style="width:auto; margin-top: 15px;">Take the Quiz!!</button>

    <div id="quizContainer" class="modal">
    <span onclick="document.getElementById('quizContainer').style.display='none'" class="close" title="Close Quiz">×</span>
        <header class="title">Vowel Sounds</header>
        <div id="question" class="question"></div>
        <label class="option"><input type="radio" name="option" value="1" /> <span id="opt1"></span></label>
        <label class="option"><input type="radio" name="option" value="2" /> <span id="opt2"></span></label>
        <label class="option"><input type="radio" name="option" value="3" /> <span id="opt3"></span></label>
        <label class="option"><input type="radio" name="option" value="4" /> <span id="opt4"></span></label>
        <button id="nextButton" class="next-btn" onclick="loadNextQuestion();">Next</button>
        <button id="backButton" class="back-btn" onclick="loadPrevQuestion();">Back</button>
        <div id="result" class="container result" style="display:none;"></div>
    </div>
    </div>
    <script>
    // Get the modal
    var modal = document.getElementById('quizContainer');
    </script>

CSS代码是：

    .modal { display: none; background-color: #fefefe; height: 387px; width: 100%; position: fixed; z-index: 1; overflow: auto; padding-top: 100px; margin-top: 100px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);  padding: 20px; border: 1px solid #08038C; box-shadow: 0 0 8px 3px #fff; }
    .title { padding-top: 20px; text-align: center; font-size: 40px; text-transform: uppercase; color: #08038c; }
    .question { padding: 20px; font-size: 22px; background: #08038c; border-radius: 20px; margin: 10px 0 10px 0; color: #f6f6f6; }
    .option{ width: 450px; display: inline-block; padding: 10px 0 10px 15px; vertical-align: middle; background: #08038c; margin: 10px 0 10px 10px; color: white; border-radius: 20px; }
    .option:hover{  background: #08038c; color: #f6f6f6;}
    .next-btn, .back-btn { border: 2px solid #08038c; outline: none;    background: rgba(255,255,255, 0.5); width: 150px; height: 35px; cursor: pointer; float: right;  margin: 10px; }
    .next-btn:hover, .back-btn:hover { background: #08038c; color: #f6f6f6; }
    .result { height: 20px; text-align: center; font-size: 20px; }
    .option input:checked .option{ background: #08038c; color: #000; }
    .close { position: absolute; right: 35px; top: 15px; color: #000; font-size: 40px; font-weight: bold; }
    #quiz { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; }
    .back-btn { float:left;}
    .close:hover, .close:focus { color: red; cursor: pointer; }

Answer 1

jsbin的JavaScript中有拼写错误。在定义totQuestions之前定义questions。如果你在程序之后将它移动到至少运行。

一般的想法应该是存储答案并在最后计算总数。您只需创建另一个数组answers，然后在loadNextQuestion中设置answers[currentQuestion] = answer，而不是if / score + = 1块。您可以向loadPrevQuestion添加类似的功能。然后在loadQuestion中，您可以设置与checked对应的选项的answers[currentQuestion]。最后，您不是score变量，而是在最后计算它，例如reduction。

Here's a jsbin doing the above，虽然它使用ES6而不是answers数组，但我将其合并到questions并使选项动态化。

后退按钮不记得Javascript测验中的选项

1 个答案: