Пожалуйста, просмотрите мой код и укажите ошибки - PullRequest
Новая
       1

Пожалуйста, просмотрите мой код и укажите ошибки

0 голосов
/ 12 марта 2020

Вот код для приложения Викторина, используя HTML, CSS и JavaScript. Вам задают несколько вопросов, и вам нужно выбрать один из вариантов для каждого вопроса, а затем нажать «Отправить». Общий полученный результат должен быть указан в «Вы набрали ____ баллов». Тем не менее, когда я нажимаю «отправить», результат не меняется. Вот код для HTML, CSS и Javascript. Пожалуйста, исправьте код и сообщите мне, где я ошибся. 

<!DOCTYPE html>
<html>
    <head>
        <title>Quiz Game</title>

    </head>

    <body>
        <style>
            .header{
                text-align: center;
                color:red;
                margin-top:100px;
                font-size: 100px;
            }
            .main{
                border: solid 1px blue;
                background-color: blue;

            }
             /* .options{
                 padding-left: 10px; 
            }  */
            .options li{
             list-style-type: circle;
             /* padding-left: 10px; */
             font-size: 20px;
            }
            .result1{
                border:2px solid black;
                margin-left: 500px;
                margin-right: 500px;
                background-color: grey;
                font-size: 20px;
                color:red;
            }
            .span{
                font-size: 50px;
                color:salmon;
                border:2px solid orangered;
            }
        </style>

        <h1 class="header">QUIZ</h1>
        <br>
        <div class="main">
            <div class="quiz-form">
        <h3 style="color:white;padding-left:50px">Question 1</h3>
        <br>

        <p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
        <br>
        <input type='radio' name='Q1' id='Option-1'value='Option 1' >
       <label  style="color:white;" for="Option-1">Option 1</label><br>
            <br>
          <input type='radio' name='Q1' id='Option-2' value='Option 2'>
       <label  style="color:white;" for="Option-2">Option 2</label><br>
            <br> 
            </div>
            <div class="quiz-form">
            <h3 style="color:white;padding-left:50px">Question 2</h3>
        <br>

        <p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
        <br>
        <input type='radio' name='Q2' id='Option-3'value='Option 1' >
       <label  style="color:white;" for="Option-3">Option 1</label><br>
            <br>
          <input type='radio' name='Q2' id='Option-4' value='Option 2'>
       <label  style="color:white;" for="Option-4">Option 2</label><br>
            <br> 
            </div>
            <div class="quiz-form">
            <h3 style="color:white;padding-left:50px">Question 3</h3>
        <br>

        <p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
        <br>
        <input type='radio' name='Q3' id='Option-5' value='Option 1'>
       <label  style="color:white;" for="Option-5">Option 1</label><br>
            <br>
          <input type='radio' name='Q3' id='Option-6'value='Option 2'>
       <label  style="color:white;" for="Option-6">Option 2</label><br>
            <br> 
            </div>
            <div class="quiz-form">
            <h3 style="color:white;padding-left:50px">Question 4</h3>
        <br>

        <p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
        <br>
        <input type='radio' name='Q4' id='Option-7' value='Option 1'>
       <label  style="color:white;" for="Option-7">Option 1</label><br>
            <br>
          <input type='radio' name='Q4' id='Option-8' value='Option 2'>
       <label  style="color:white;" for="Option-8">Option 2</label><br>
            <br> <br><br>
            </div>
            <div style="text-align:center">
            <input type="submit" value="Submit" style="font-size:20px;">
        </div>
    </div>
        <div class="result" style="text-align: center;">
            <h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
            <p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
        </div>




        <script src="Quiz.js"></script>
    </body>

</html>

Javascript: - 

const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
    form.preventDefault();

    const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
    userAnswers.forEach((answer,index)=>{
        if(answer==correctAnswers[index]){
            score+=20;

        }
        console.log(score);
    });


    const result=document.querySelector(".result")
            result.querySelector("span").textContent= '${score}';


    });

1 Ответ

0 голосов
/ 12 марта 2020

Вам нужен элемент form, просто оберните весь тест в один.

Проблема № 2, preventDefault() - это функция события, а не элемент, что-то вроде этого: 

form.addEventListener('submit', e => {
        e.preventDefault();
        // more things .....
});

Наконец, вы неправильно интерполируете score, используйте back- тики, то есть: 

result.querySelector('span').textContent = `${score}`;

Вот рабочий пример с предложенными изменениями: 

<html>
  <head>
    <title>Quiz Game</title>
  </head>

  <body>
    <style>
      .header {
        text-align: center;
        color: red;
        margin-top: 100px;
        font-size: 100px;
      }
      .main {
        border: solid 1px blue;
        background-color: blue;
      }
      /* .options{
                 padding-left: 10px; 
            }  */
      .options li {
        list-style-type: circle;
        /* padding-left: 10px; */
        font-size: 20px;
      }
      .result1 {
        border: 2px solid black;
        margin-left: 500px;
        margin-right: 500px;
        background-color: grey;
        font-size: 20px;
        color: red;
      }
      .span {
        font-size: 50px;
        color: salmon;
        border: 2px solid orangered;
      }
    </style>

    <h1 class="header">QUIZ</h1>
    <br />
    <div class="main">
      <form>
        <div class="quiz-form">
          <h3 style="color:white;padding-left:50px">Question 1</h3>
          <br />

          <p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
          <br />
          <input type="radio" name="Q1" id="Option-1" value="Option 1" />
          <label style="color:white;" for="Option-1">Option 1</label><br />
          <br />
          <input type="radio" name="Q1" id="Option-2" value="Option 2" />
          <label style="color:white;" for="Option-2">Option 2</label><br />
          <br />
        </div>
        <div class="quiz-form">
          <h3 style="color:white;padding-left:50px">Question 2</h3>
          <br />

          <p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
          <br />
          <input type="radio" name="Q2" id="Option-3" value="Option 1" />
          <label style="color:white;" for="Option-3">Option 1</label><br />
          <br />
          <input type="radio" name="Q2" id="Option-4" value="Option 2" />
          <label style="color:white;" for="Option-4">Option 2</label><br />
          <br />
        </div>
        <div class="quiz-form">
          <h3 style="color:white;padding-left:50px">Question 3</h3>
          <br />

          <p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
          <br />
          <input type="radio" name="Q3" id="Option-5" value="Option 1" />
          <label style="color:white;" for="Option-5">Option 1</label><br />
          <br />
          <input type="radio" name="Q3" id="Option-6" value="Option 2" />
          <label style="color:white;" for="Option-6">Option 2</label><br />
          <br />
        </div>
        <div class="quiz-form">
          <h3 style="color:white;padding-left:50px">Question 4</h3>
          <br />

          <p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
          <br />
          <input type="radio" name="Q4" id="Option-7" value="Option 1" />
          <label style="color:white;" for="Option-7">Option 1</label><br />
          <br />
          <input type="radio" name="Q4" id="Option-8" value="Option 2" />
          <label style="color:white;" for="Option-8">Option 2</label><br />
          <br />
          <br /><br />
        </div>
        <div style="text-align:center">
          <input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
        </div>
      </form>
    </div>
    <div class="result" style="text-align: center;">
      <h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
      <p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
    </div>
    <script>
      const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
      const form = document.querySelector('form');
      let score = 0;
      form.addEventListener('submit', e => {
        e.preventDefault();

        const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
        userAnswers.forEach((answer, index) => {
          if (answer == correctAnswers[index]) {
            score += 20;
          }
          console.log(score);
        });

        const result = document.querySelector('.result');
        result.querySelector('span').textContent = `${score}`;
      });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...