I'm currently working on programming a quiz withe results. I've tried this:
<html>
<body>
<h1></h1>
<form>
<ol>
<li> How much are you willing to spend on a phone per month?</li>
<ul>
<li><input type = "
radio" name = "q1" id="q1_1"> £5-£10.</input></li>
<li><input type = "
radio" name = "q1" id="q1_2"> £10-£15.</input></li>
<li><input type = "
radio" name = "q1" id="q1_3"> £15-£20.</input></li>
<li><input type = "
radio" name = "q1" id="q1_4"> £20-£25.</input></li>
<li><input type = "
radio" name = "q1" id="q1_5"> £25-£30.</input></li>
<li><input type = "
radio" name = "q1" id="q1_6"> £30-£35.</input></li>
<li><input type = "
radio" name = "q1" id="q1_7"> £35-£40.</input></li>
</ul>
<li> Are you good with technology</li>
<ul>
<li><input type = "
radio" name = "q2" id="q2_1"> Yes.</input></li>
<li><input type = "
radio" name = "q2" id="q2_2"> No.</input></li>
</ul>
<li> Are you looking for an easy to use phone</li>
<ul>
<li><input type = "
radio" name = "q3" id="q3_1"> Yes.</input></li>
<li><input type = "
radio" name = "q3" id="q3_2"> No.</input></li>
</ul>
<li> Are you looking for a modern type of phone?</li>
<ul>
<li><input type = "
radio" name = "q4" id="q4_1"> Yes.</input></li>
<li><input type = "
radio" name = "q4" id="q4_2"> No.</input></li>
</ul>
<li> How big do you want the phone to be?</li>
<ul>
<li><input type = "
radio" name = "q5" id="q5_1"> Big.</input></li>
<li><input type = "
radio" name = "q5" id="q5_2"> Medium.</input></li>
<li><input type = "
radio" name = "q5" id="q5_3"> Small.</input></li>
<li><input type = "
radio" name = "q5" id="q5_4"> I don't really mind.</input></li>
</ul>
<li> Do you care about the colour of the phone?</li>
<ul>
<li><input type = "
radio" name = "q6" id="q6_1"> Yes.</input></li>
<li><input type = "
radio" name = "q6" id="q6_2"> No.</input></li>
</ul>
<li> Have you ever owned a phone before?</li>
<ul>
<li><input type = "
radio" name = "q7" id="q7_1"> Yes.</input></li>
<li><input type = "
radio" name = "q7" id="q7_2"> No.</input></li>
</ul>
<li> Do you want to be able to use the phone to get out of awkward social situations?</li>
<ul>
<li><input type = "
radio" name = "q8" id="q8_1"> Yes.</input></li>
<li><input type = "
radio" name = "q8" id="q8_2"> No.</input></li>
</ul>
<li> Do you want to be able to access the app store and download apps using your phone?</li>
<ul>
<li><input type = "
radio" name = "q9" id="q9_1"> Yes.</input></li>
<li><input type = "
radio" name = "q9" id="q9_2"> No.</input></li>
</ul>
<li> What happened to the last phone you owned?</li>
<ul>
<li><input type = "
radio" name = "q10" id="q10_1"> I got bored of it.</input></li>
<li><input type = "
radio" name = "q10" id="q10_2"> It broke.</input></li>
<li><input type = "
radio" name = "q10" id="q10_3"> The contract ran out.</input></li>
<li><input type = "
radio" name = "q10" id="q10_4"> Other.</input></li>
</ul>
</ol>
<input type = "
button" value = "Submit" onclick="getResults()"> <input type = "reset" value = "Clear"></input>
<textarea id="result">The right phone for you will be displayed here.</textarea>
</html>
<script>
function getResults() {
if (document.getElementById('q1_1').checked &&
document.getElementById('q2_1').checked &&
document.getElementById('q3_1').checked &&
document.getElementById('q4_1').checked &&
document.getElementById('q5_1').checked &&
document.getElementById('q6_1').checked &&
document.getElementById('q7_1').checked &&
document.getElementById('q8_1').checked &&
document.getElementById('q9_1').checked &&
document.getElementById('q10_1').checked
) {
document.getElementById('result').innerHTML = 'Unfortunately, the iPhone is the right phone for you.';
}
}
</script>
</body>
But it's just too long winded. Is there any other ways I can design a quiz like this but without having to write a block of code for each
radio button?
