-2
Так что я имею вопросы, создавая систему подсчета очков, которая будет принимать мои пользователи inpiut и поместить их в категорию поддельного вентилятора, хардкор вентилятор и т.д.множественный выбор викторины с Scoring и изображений продукцией
мне пришлось перепечатывать этот вопрос, потому что он был закрыт. надеюсь, этот пост более ясен
Это для проекта, который должен быть сегодня вечером, и я полностью потерял. эти требования:
«Полюбуйся и входной магазин пользователя из десяти различных вопросов, ответов пользователя с помощью элементов формы HTML Используйте массив опций для сопоставления данных пользователей к матрице потенциальных результатов Динамически отображения соответствующих результатов изображения и текст пользователя после завершения вопросов Format надлежащим образом для использования на мобильном, планшет или рабочий стол с помощью медиа запросов»
это код, который я до сих пор
<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>
\t <div class="col one">
\t <br>
\t 1. Who did Demi punch back in 2010?
\t <br>
\t <input type="radio" name="one" id="manager" value="Wannabe"> <label for="manager">Manager</label>
\t <br><input type="radio" name="one" id="costar" value="Lowkey"> <label for="costar">CoStar</label>
\t <br><input type="radio" name="one" id="father" value="Fake"> <label for="father">Father</label>
\t <br><input type="radio" name="one" id="dancer" value="Hardcore"> <label for="dancer">Dancer</label>
\t </div>
\t <div class="col two">
\t <br>
\t 2. What song did Demi sing on AS THE BELL RINGS?
\t <br>
\t <input type="radio" name="two" id="heartattack" value="Wannabe"> <label for="heartattack">HeartAttack</label>
\t <br><input type="radio" name="two" id="together" value="Fake"> <label for="together">Together</label>
\t <br><input type="radio" name="two" id="shadow" value="Hardcore"> <label for="shadow">Shadow</label>
\t <br><input type="radio" name="two" id="gotta" value="Lowkey"> <label for="gotta">Gotta Find You</label>
\t </div>
\t <div class="col three">
\t <br>
\t 3. How did Demi celebrate her 21st birthday?
\t <br>
\t <input type="radio" name="three" id="partying" value="Fake"> <label for="partying">Partying</label>
\t <br><input type="radio" name="three" id="africa" value="Hardcore"> <label for="africa">Mission Trip to Africa</label>
\t <br><input type="radio" name="three" id="disneyland" value="Lowkey"> <label for="disneyland">Disneyland</label>
\t <br><input type="radio" name="three" id="home" value="Wannabe"> <label for="home">At Home</label>
\t </div>
\t <div class="col four">
\t <br>
\t 4. What celebrity sent Demi flowers when she was in Rehab?
\t <br>
\t <input type="radio" name="four" id="selena" value="Lowkey"> <label for="selena">Selena</label>
\t <br><input type="radio" name="four" id="miley" value="Hardcore"> <label for="miley">Miley</label>
\t <br><input type="radio" name="four" id="taylor" value="Wannabe"> <label for="taylor">Taylor</labe>
\t <br><input type="radio" name="four" id="ashley" value="Fake"> <label for="ashley">Ashley</label>
\t </div>
\t <div class="col five">
\t <br>
\t 5. What substance abuse addictions did Demi struggle with?
\t <br>
\t <input type="radio" name="five" id="alcohol" value="Wannabe"> <label for="alcohol">Alcohol</label>
\t <br><input type="radio" name="five" id="cocaine" value="Lowkey"> <label for="cocaine">Cocaine</label>
\t <br><input type="radio" name="five" id="weed" value="Fake"> <label for="weed">Weed</label>
\t <br><input type="radio" name="five" id="all" value="Hardcore"> <label for="all">All Of The Above</label>
\t </div>
\t <div class="col six">
\t <br>
\t 6. What artist has Demi NOT collaborated with?
\t <br>
\t <input type="radio" name="six" id="adele" value="Hardcore"> <label for="slytherin">Adele</label>
\t <br><input type="radio" name="six" id="miguel" value="Lowkey"> <label for="miguel">Miguel</label>
\t <br><input type="radio" name="six" id="missy" value="Fake"> <label for="missy">Missy Elliot</label>
\t <br><input type="radio" name="six" id="john" value="Wannabe"> <label for="john">John Mayer</label>
\t </div>
\t <div class="col seven">
\t <br>
\t 7. What disease does Demi Lovato struggle with?
\t <br>
\t <input type="radio" name="seven" id="lupus" value="Lowkey"> <label for="lupus">Lupus</label>
\t <br><input type="radio" name="seven" id="diabetes" value="Wannabe"> <label for="diabetes">Diabetes</label>
\t <br><input type="radio" name="seven" id="bipolar" value="Hardcore"> <label for="bipolar">Bipolar</label>
\t <br><input type="radio" name="seven" id="none" value="Fake"> <label for="none">None</label>
\t </div>
\t <div class="col eight">
\t <br>
\t 8. What kind of shows does Demi enjoy watching?
\t <br>
\t <input type="radio" name="eight" id="reality" value="Fake"> <label for="reality">Reality Shows</label>
\t <br><input type="radio" name="eight" id="crime" value="Hardcore"> <label for="crime">Crime Shows</label>
\t <br><input type="radio" name="eight" id="sitcoms" value="Lowkey"> <label for="sitcoms">Sitcoms</label>
\t <br><input type="radio" name="eight" id="game" value="Wannabe"> <label for="game">Game Shows</label>
\t </div>
\t <div class="col nine">
\t <br>
\t 9. Which artist did Demi shade in 2016?
\t <br>
\t <input type="radio" name="nine" id="taylor" value="Lowkey"> <label for="taylor">Taylor Swift</label>
\t <br><input type="radio" name="nine" id="nicki" value="Wannabe"> <label for="nicki">Nicki Minaj</label>
\t <br><input type="radio" name="nine" id="selena" value="Fake"> <label for="selena">Selena Gomez</label>
\t <br><input type="radio" name="nine" id="all" value="Hardcore"> <label for="all">All of the Above</label>
\t </div>
\t <div class="col ten">
\t <br>
\t 10. Which celebrity friendship has Demi NOT publicly made?
\t <br>
\t <input type="radio" name="ten" id="jennifer" value="Fake"> <label for="jennifer">Jennifer Lopez</label>
\t <br><input type="radio" name="ten" id="ariana" value="Lowkey"> <label for="ariana">Ariana Grande</label>
\t <br><input type="radio" name="ten" id="christina" value="Hardcore"> <label for="christina">Christina Aguilera</label>
\t <br><input type="radio" name="ten" id="iggy" value="Wannabe"> <label for="iggy">Iggy Azalea</label>
\t </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() {
\t var button = document.getElementById('quizButton');
\t button.onclick = checkQuiz;
}
//get the results when the button is clicked
function checkQuiz() {
\t //confirm that the button was clicked
\t //alert('Button was clicked!');
\t //create a variable to store the user's house
\t var one;
\t //get the input data as an array
\t var inputs = document.getElementsByName('one');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t one = inputs[i].value;
\t \t \t alert(one);
\t \t \t displayOne(one);
/*
\t var two;
\t //get the input data as an array
\t var inputs = document.getElementsByName('two');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t two = inputs[i].value;
\t \t \t alert(two);
\t \t \t displayTwo(two);
\t var three;
\t //get the input data as an array
\t var inputs = document.getElementsByName('three');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t three = inputs[i].value;
\t \t \t alert(three);
\t \t \t displayThree(three);
\t var four;
\t //get the input data as an array
\t var inputs = document.getElementsByName('four');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t four = inputs[i].value;
\t \t \t alert(four);
\t \t \t displayFour(four);
\t var five;
\t //get the input data as an array
\t var inputs = document.getElementsByName('five');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t five = inputs[i].value;
\t \t \t alert(five);
\t \t \t displayFive(five);
\t var six;
\t //get the input data as an array
\t var inputs = document.getElementsByName('six');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t six = inputs[i].value;
\t \t \t alert(six);
\t \t \t displaySix(six);
\t var seven;
\t //get the input data as an array
\t var inputs = document.getElementsByName('seven');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t seven = inputs[i].value;
\t \t \t alert(seven);
\t \t \t displaySeven(seven);
\t var eight;
\t //get the input data as an array
\t var inputs = document.getElementsByName('eight');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t eight = inputs[i].value;
\t \t \t alert(eight);
\t \t \t displayEight(eight);
\t var nine;
\t //get the input data as an array
\t var inputs = document.getElementsByName('nine');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t nine = inputs[i].value;
\t \t \t alert(nine);
\t \t \t displayNine(nine);
\t var ten;
\t //get the input data as an array
\t var inputs = document.getElementsByName('ten');
\t //loop through all the possible inputs (the radio buttons)
\t for (var i=0; i < inputs.length; i++) {
\t \t //see if one of the buttons is selected
\t \t if (inputs[i].checked) {
\t \t \t //if it is save the house name
\t \t \t ten = inputs[i].value;
\t \t \t alert(ten);
\t \t \t displayTen(ten);
*/
\t \t }
\t }
\t //if house hasn't been defined, no choice was picked
\t /*if (!one) {
\t \t alert('Please answer question one.');
\t }*/
}
//display a results image for the chosen house
function displayOne(one) {
\t //make a new image object
\t var image = document.createElement('img');
\t //assign it CSS properties with a class
\t image.className = 'one';
\t //grab the paragraph to append the image to
\t var source = document.getElementById('oneParagraph');
\t // use a \ to indicate a ' in a string
\t var text = 'You\'re a ' + one + ' Fan!';
\t //pick the right image source by house using a switch statement
switch(one) {
\t \t case 'Fake':
\t \t \t image.src = 'http://24.media.tumblr.com/acf005f7efdd37f9cde57592a80055c5/tumblr_mpqppeDWMY1sqjb9eo3_500.gif';
\t \t \t break;
\t \t case 'Wannabe':
\t \t \t image.src = 'http://data3.whicdn.com/images/64130190/large.gif';
\t \t \t break;
\t \t case 'Lowkey':
\t \t \t image.src = 'http://24.media.tumblr.com/d4af4200cc8ac0ba5bb0f56afec858dc/tumblr_mj4xhrhsWF1rgmvx3o1_250.gif';
\t \t \t break;
\t \t case 'Hardcore':
\t \t \t image.src = 'http://media.giphy.com/media/2VnL5vdmRJfVe/giphy.gif';
\t \t \t break;
\t \t default:
\t \t \t image.src = '';
}
\t //add the image to the paragraph
\t source.appendChild(image);
\t //append the text on a new line
\t source.innerHTML += '<br>' + text;
}
//call the initial function when the window is loaded
window.onload = init;
</script>
<html>
я просто обновил HTML-код, я поместил неправильный. но теперь он отредактирован. – IDontUnderstandThisCourse
Привет, если вы хотите хранить данные, вам нужно будет использовать php, вы можете хранить данные в сеансе, но JS будет хранить данные только до тех пор, пока страница не будет обновлена. –