So I am having issues creating a scoring system that will take my users inpiut and place them into a category of a fake fan, hardcore fan, etc.
I had to repost this question, because it was closed. hopefully this post is more clear
this is for a project that is due tonight, and i am completely lost. these are the requirements:
"Take in and store user input from ten different questions answered by the user via HTML form elements Use an array of options to correlate user data to a matrix of potential results Dynamically display appropriate result images and text to the user after completing the questions Format appropriately for use on a mobile, tablet, or desktop screen using media queries"
this is the code i have so far
<html>
<head>
<title>Demi Quiz</title>
</head>
<style>
body {
background-color: #ffffff;
}
.col {
color: #fff;
float: left;
margin: 2%;
width: 46%;
}
.one {
background-color: black;
}
.two {
background-color: black;
}
.three {
background-color: black;
}
.four {
background-color: black;
}
.five {
background-color: black;
}
.six {
background-color: black;
}
.seven {
background-color: black;
}
.eight {
background-color: black;
}
.nine {
background-color: black;
}
.ten {
background-color: black;
}
@media screen and (max-width: 600px) {
.col {
float: none;
margin: 0;
width: 100%;
}
h1 {
color: red;
text-align: center;
}
</style>
<body>
<form>
<h1>How Big Of A Demi Lovato Fan Are You?<h1>
<div class="col one">
<br>
1. Who did Demi punch back in 2010?
<br>
<input type="radio" name="one" id="manager" value="Wannabe"> <label for="manager">Manager</label>
<br><input type="radio" name="one" id="costar" value="Lowkey"> <label for="costar">CoStar</label>
<br><input type="radio" name="one" id="father" value="Fake"> <label for="father">Father</label>
<br><input type="radio" name="one" id="dancer" value="Hardcore"> <label for="dancer">Dancer</label>
</div>
<div class="col two">
<br>
2. What song did Demi sing on AS THE BELL RINGS?
<br>
<input type="radio" name="two" id="heartattack" value="Wannabe"> <label for="heartattack">HeartAttack</label>
<br><input type="radio" name="two" id="together" value="Fake"> <label for="together">Together</label>
<br><input type="radio" name="two" id="shadow" value="Hardcore"> <label for="shadow">Shadow</label>
<br><input type="radio" name="two" id="gotta" value="Lowkey"> <label for="gotta">Gotta Find You</label>
</div>
<div class="col three">
<br>
3. How did Demi celebrate her 21st birthday?
<br>
<input type="radio" name="three" id="partying" value="Fake"> <label for="partying">Partying</label>
<br><input type="radio" name="three" id="africa" value="Hardcore"> <label for="africa">Mission Trip to Africa</label>
<br><input type="radio" name="three" id="disneyland" value="Lowkey"> <label for="disneyland">Disneyland</label>
<br><input type="radio" name="three" id="home" value="Wannabe"> <label for="home">At Home</label>
</div>
<div class="col four">
<br>
4. What celebrity sent Demi flowers when she was in Rehab?
<br>
<input type="radio" name="four" id="selena" value="Lowkey"> <label for="selena">Selena</label>
<br><input type="radio" name="four" id="miley" value="Hardcore"> <label for="miley">Miley</label>
<br><input type="radio" name="four" id="taylor" value="Wannabe"> <label for="taylor">Taylor</labe>
<br><input type="radio" name="four" id="ashley" value="Fake"> <label for="ashley">Ashley</label>
</div>
<div class="col five">
<br>
5. What substance abuse addictions did Demi struggle with?
<br>
<input type="radio" name="five" id="alcohol" value="Wannabe"> <label for="alcohol">Alcohol</label>
<br><input type="radio" name="five" id="cocaine" value="Lowkey"> <label for="cocaine">Cocaine</label>
<br><input type="radio" name="five" id="weed" value="Fake"> <label for="weed">Weed</label>
<br><input type="radio" name="five" id="all" value="Hardcore"> <label for="all">All Of The Above</label>
</div>
<div class="col six">
<br>
6. What artist has Demi NOT collaborated with?
<br>
<input type="radio" name="six" id="adele" value="Hardcore"> <label for="slytherin">Adele</label>
<br><input type="radio" name="six" id="miguel" value="Lowkey"> <label for="miguel">Miguel</label>
<br><input type="radio" name="six" id="missy" value="Fake"> <label for="missy">Missy Elliot</label>
<br><input type="radio" name="six" id="john" value="Wannabe"> <label for="john">John Mayer</label>
</div>
<div class="col seven">
<br>
7. What disease does Demi Lovato struggle with?
<br>
<input type="radio" name="seven" id="lupus" value="Lowkey"> <label for="lupus">Lupus</label>
<br><input type="radio" name="seven" id="diabetes" value="Wannabe"> <label for="diabetes">Diabetes</label>
<br><input type="radio" name="seven" id="bipolar" value="Hardcore"> <label for="bipolar">Bipolar</label>
<br><input type="radio" name="seven" id="none" value="Fake"> <label for="none">None</label>
</div>
<div class="col eight">
<br>
8. What kind of shows does Demi enjoy watching?
<br>
<input type="radio" name="eight" id="reality" value="Fake"> <label for="reality">Reality Shows</label>
<br><input type="radio" name="eight" id="crime" value="Hardcore"> <label for="crime">Crime Shows</label>
<br><input type="radio" name="eight" id="sitcoms" value="Lowkey"> <label for="sitcoms">Sitcoms</label>
<br><input type="radio" name="eight" id="game" value="Wannabe"> <label for="game">Game Shows</label>
</div>
<div class="col nine">
<br>
9. Which artist did Demi shade in 2016?
<br>
<input type="radio" name="nine" id="taylor" value="Lowkey"> <label for="taylor">Taylor Swift</label>
<br><input type="radio" name="nine" id="nicki" value="Wannabe"> <label for="nicki">Nicki Minaj</label>
<br><input type="radio" name="nine" id="selena" value="Fake"> <label for="selena">Selena Gomez</label>
<br><input type="radio" name="nine" id="all" value="Hardcore"> <label for="all">All of the Above</label>
</div>
<div class="col ten">
<br>
10. Which celebrity friendship has Demi NOT publicly made?
<br>
<input type="radio" name="ten" id="jennifer" value="Fake"> <label for="jennifer">Jennifer Lopez</label>
<br><input type="radio" name="ten" id="ariana" value="Lowkey"> <label for="ariana">Ariana Grande</label>
<br><input type="radio" name="ten" id="christina" value="Hardcore"> <label for="christina">Christina Aguilera</label>
<br><input type="radio" name="ten" id="iggy" value="Wannabe"> <label for="iggy">Iggy Azalea</label>
</div>
<br><input type="button" id="quizButton" value="Get Results!"><br>
</form>
<p id="oneParagraph"></p>
</body>
<script>
//set up a function to run when the window is loaded
//grab the button and wait for a click
function init() {
var button = document.getElementById('quizButton');
button.onclick = checkQuiz;
}
//get the results when the button is clicked
function checkQuiz() {
//confirm that the button was clicked
//alert('Button was clicked!');
//create a variable to store the user's house
var one;
//get the input data as an array
var inputs = document.getElementsByName('one');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
one = inputs[i].value;
alert(one);
displayOne(one);
/*
var two;
//get the input data as an array
var inputs = document.getElementsByName('two');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
two = inputs[i].value;
alert(two);
displayTwo(two);
var three;
//get the input data as an array
var inputs = document.getElementsByName('three');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
three = inputs[i].value;
alert(three);
displayThree(three);
var four;
//get the input data as an array
var inputs = document.getElementsByName('four');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
four = inputs[i].value;
alert(four);
displayFour(four);
var five;
//get the input data as an array
var inputs = document.getElementsByName('five');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
five = inputs[i].value;
alert(five);
displayFive(five);
var six;
//get the input data as an array
var inputs = document.getElementsByName('six');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
six = inputs[i].value;
alert(six);
displaySix(six);
var seven;
//get the input data as an array
var inputs = document.getElementsByName('seven');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
seven = inputs[i].value;
alert(seven);
displaySeven(seven);
var eight;
//get the input data as an array
var inputs = document.getElementsByName('eight');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
eight = inputs[i].value;
alert(eight);
displayEight(eight);
var nine;
//get the input data as an array
var inputs = document.getElementsByName('nine');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
nine = inputs[i].value;
alert(nine);
displayNine(nine);
var ten;
//get the input data as an array
var inputs = document.getElementsByName('ten');
//loop through all the possible inputs (the radio buttons)
for (var i=0; i < inputs.length; i++) {
//see if one of the buttons is selected
if (inputs[i].checked) {
//if it is save the house name
ten = inputs[i].value;
alert(ten);
displayTen(ten);
*/
}
}
//if house hasn't been defined, no choice was picked
/*if (!one) {
alert('Please answer question one.');
}*/
}
//display a results image for the chosen house
function displayOne(one) {
//make a new image object
var image = document.createElement('img');
//assign it CSS properties with a class
image.className = 'one';
//grab the paragraph to append the image to
var source = document.getElementById('oneParagraph');
// use a \ to indicate a ' in a string
var text = 'You\'re a ' + one + ' Fan!';
//pick the right image source by house using a switch statement
switch(one) {
case 'Fake':
image.src = 'http://24.media.tumblr.com/acf005f7efdd37f9cde57592a80055c5/tumblr_mpqppeDWMY1sqjb9eo3_500.gif';
break;
case 'Wannabe':
image.src = 'http://data3.whicdn.com/images/64130190/large.gif';
break;
case 'Lowkey':
image.src = 'http://24.media.tumblr.com/d4af4200cc8ac0ba5bb0f56afec858dc/tumblr_mj4xhrhsWF1rgmvx3o1_250.gif';
break;
case 'Hardcore':
image.src = 'http://media.giphy.com/media/2VnL5vdmRJfVe/giphy.gif';
break;
default:
image.src = '';
}
//add the image to the paragraph
source.appendChild(image);
//append the text on a new line
source.innerHTML += '<br>' + text;
}
//call the initial function when the window is loaded
window.onload = init;
</script>
<html>
