1
私はJavascriptクイズで戻るボタンを作成しましたが、クリックすると戻ってきますが選択した選択肢が覚えていません新しい答えを選ぶ私はこれについてどうやって行くのか分かりません。以下は、Javascriptのリンクです：戻るボタンがJavascriptクイズの選択肢を記憶していない
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);
質問 http://jsbin.com/zinagipovo/edit?html,css,js,console
は、外部ファイルである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; }