I am developing a quizz application in vanilla JavaScript and in the interest of best practices, I want to ensure I follow the D.R.Y. principle.
I have five questions that I need to check answers for.
As a result, instead of using if statements five times, I thought I could implement a switch statement like so:
callback.js:
function submitAnswers() {
var total = 5;
var score = 0;
// Get User Input
var q1 = document.forms['quizForm']['q1'].value;
var q2 = document.forms['quizForm']['q2'].value;
var q3 = document.forms['quizForm']['q3'].value;
var q4 = document.forms['quizForm']['q4'].value;
var q5 = document.forms['quizForm']['q5'].value;
// Validation
for (i = 1; i <= total; i++) {
if (eval('q'+i) == null || eval('q'+i) == '') {
alert('You missed question '+ i);
return false;
}
}
// Set Correct Answers
var answers = ["d","b","c","a","b"];
// Check answers
switch (answers) {
case q1 == answers[0]:
score++;
break;
case q2 == answers[1]:
score++;
break;
case q3 == answers[2]:
score++;
break;
case q4 == answers[3]:
score++;
break;
case q5 == answers[4]:
score++;
break;
}
alert('You scored '+score+' out of ' +total);
}
This is the index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="http://ift.tt/1xg2FV4" rel="stylesheet">
<script type="text/javascript" src="js/callback.js"></script>
<title>Quiz About the Wonderful World of Fungi</title>
</head>
<body>
<div id="container">
<header>
<h1>Quiz About the Wonderful World of Fungi</h1>
<p>Test your knowledge</p>
</header>
<section>
<div id="results"></div>
<form class="myForm" name="quizForm" onSubmit="return submitAnswers()">
<h3>1. Roughly how many species of organisms of the kingdom of Fungi have been identified, so far?</h3>
<input type="radio" name="q1" value="a" id="q1a">a. 2 Million<br>
<input type="radio" name="q1" value="b" id="q1b">b. 37,000<br>
<input type="radio" name="q1" value="c" id="q1c">c. 58,000<br>
<input type="radio" name="q1" value="d" id="q1d">d. 73,000<br>
<h3>2. The process of specifically using mushrooms to break down toxic chemicals and sequester heavy metals is known as:</h3>
<input type="radio" name="q2" value="a" id="q2a">a. Bioremediation<br>
<input type="radio" name="q2" value="b" id="q2b">b. Mushremediation<br>
<input type="radio" name="q2" value="c" id="q2c">c. Mycoremediation<br>
<input type="radio" name="q2" value="d" id="q2d">d. Chitinremediation<br>
<h3>3. The above-ground part of the mushroom that we typically associate with a mushroom is only a small part of the whole organism,
as most of it is underground. What is the primary role of this part of the whole organism?</h3>
<input type="radio" name="q3" value="a" id="q3a">a. Nutrient Absorptionn<br>
<input type="radio" name="q3" value="b" id="q3b">b. Protection<br>
<input type="radio" name="q3" value="c" id="q3c">c. Sexual Reproduction<br>
<input type="radio" name="q3" value="d" id="q3d">d. Oxygen Absorption<br>
<h3>4. What Is the primary role of a mushroom’s underground mycelium?</h3>
<input type="radio" name="q4" value="a" id="q4a">a. Nutrient Absorption<br>
<input type="radio" name="q4" value="b" id="q4b">b. Anchoring<br>
<input type="radio" name="q4" value="c" id="q4c">c. Asexual Reproduction<br>
<input type="radio" name="q4" value="d" id="q4d">d. Protection<br>
<h3>5. The largest living organism on earth is thought to be a mushroom (the honey fungus) and it is estimated to be what distance across?</h3>
<input type="radio" name="q5" value="a" id="q5a">a. 0.5 mile<br>
<input type="radio" name="q5" value="b" id="q5b">b. 2.4 miles<br>
<input type="radio" name="q5" value="c" id="q5c">c. 8 miles<br>
<input type="radio" name="q5" value="d" id="q5d">d. 0.7 mile<br>
<br><br>
<input type="submit" name="" value="Submit Answers">
</form>
</section>
<footer>
<p>Copyright © 2017, All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Upon testing this, I continued to get an alert saying I have 0 out of 5 correct, even when choosing the correct answers.
Is the switch statement not the best solution here? Am I applying it wrong?
Aucun commentaire:
Enregistrer un commentaire