Множественный выбор викторины с оценкой и выводом изображения
Поэтому у меня возникли проблемы с созданием системы скоринга, которая будет вводить моих пользователей в категорию фальшивых фанатов, фанатов хардкора и т. Д.
Мне пришлось перепостить этот вопрос, потому что он был закрыт. надеюсь этот пост более понятен
это для проекта, который должен быть сегодня вечером, и я полностью потерян. это требования:
"Принимать и хранить пользовательский ввод из десяти различных вопросов, на которые пользователь ответил с помощью элементов формы HTML. Использовать массив опций для сопоставления пользовательских данных с матрицей потенциальных результатов. Динамически отображать соответствующие изображения результатов и текст для пользователя после выполнения вопросов. Отформатируйте соответствующим образом. для использования на экране мобильного телефона, планшета или настольного компьютера с использованием медиа-запросов "
это код у меня до сих пор
<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>1 ответ
Поэтому я думаю, что прежде всего нужно проверить, является ли ответ истинным или ложным, вы можете сделать это, назначив свой javascript для каждой переменной (один, два, три), чтобы "принять" только один ответ. Таким образом, я бы проверил, верен ли ответ в переменной для вопроса. (Вы можете сделать это, проверив идентификатор входа). Затем, если это правильно, просто скажите что-нибудь простое, например, установите переменную равной 1, тогда всякий раз, когда они получают правильный ответ, просто делайте: Score += 1;
Затем в конце сложите все оценки:
if (score <= 3) {fake();}
затем для каждого "балла" (подделка, подражатель...) сделайте функцию. например
function fake() { image.src = 'http://24.media.tumblr.com/acf005f7efdd37f9cde57592a80055c5/tumblr_mpqppeDWMY1sqjb9eo3_500.gif';}
и то же самое для всех остальных