pages/main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Arito | Test your Arithmetic Skills</title>
    <link rel="stylesheet" href="../css/basic.css" />
    <link rel="shortcut icon" href="../assets/images/Arito_favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="../css/main.css" />
  <body>


<div class="result_page">
    <div class="front_results_page">
        <header>
            <h1>Result 🧐</h1>
        </header>
        <div class="results_text_div">

          <span class="salutation_text">
            Dear <span class="user_name highlighted_text">NAME_OF_THE_PERSON</span>,
          </span>
          <span>You have scored <span class="highlighted_text"> <strong class="marks_obtained">9</strong> out of <strong class="total_marks">MARKS_HERE</strong> marks.</span></span>
          <span>Which in terms of percentage is: <strong class="highlighted_text percentage_text"><span class="percent_obtained">PERCENTAGE_HERE</span>%</strong></span>
          <span>You took <strong><span class="highlighted_text time_taken">TIME_TAKEN_HERE</span></strong> to complete the test</span>
        </div>
    </div>

    <div class="results_page_navigation_div">
      <button class="retest_button">RETAKE TEST</button>
      <button class="retest_button new_test_button">NEW TEST</button>
      <a href='../index.html' class="button retest_button back_to_home_page">BACK TO HOMEPAGE</a>
    </div>

  <div class="all_questions_div">

    <template class="question_template">

      <div class="q_no_div">

        <span class="question_number_span">Question <span class="q_num">${q_num}</span></span>

      <div class="question-serialno ">
      <div class="q_numbers_div">
          <div class="upNum_div">
            <span class="upNumber">${upnum}</span>
          </div>
          <div class="downNum_and_sign_div">
            <span class="sign">${s_of_q}</span>
            <span class="downNum">${downum}</span>
          </div>
        </div>
        <div class="answers_div">
          <div class="user_answer_div">
            <span class="user_answer">${user_answer_}</span>
          </div>
          <div class="real_answer_div">
            <span class="real_answer">${real_answer_}</span>
          </div>
        </div>

      </div>
    </div>

  </template>

  </div>
</div>

    <div class="start_test_div">
        <span class="starting_text">Starting the Test <span class="start_countdown"></span></span>
        <ul>
            <li>Keep a pencil/pen, rough copy and eraser with you.</li>
            <li>Write each question carefully and then start solving it to avoid mistakes.</li>
            <li>After solving a question, write the answer in the input area and press <kbd>Enter</kbd> or Click on "Done" Button.</li>
            <li>BELIEVE IN YOURSELF!</li>
        </ul>
        <button class="start_now_btn">Start Now!</button>
    </div>


    <div class="test_page">
    <header>
        <h1 class="test_title"></h1>
        <h2 class="question_details">Question: <span class="q_number"></span>/<span class="total_qs"></span> </h2>
    </header>

    <div class="question_container">
      <button class="prev_question_btn">&#8249;</button>
      <div class="question_div">
        <div class="question_numbers_div">
            <div class="upNumber_div">
                <span class="upNumber"></span>
            </div>

            <div class="downNumber_and_sign_div">
                <span class="sign"></span>
                <span class="downNumber"></span>
            </div>
        </div>

        <div class="input_answer_div">
          <input type="number" name="answer_from_user" class="answer_from_user" min="0" max="9999800001" required/>
        </div>
        <div class="division_answer_div">
            <div>
                <span>Q: </span><input type="number" name="quotient_from_user" class="quotient_from_user" min="0" max="9999800001" required/>
            </div>
            <div>
                <span>R: </span><input type="number" name="remainder_from_user" class="remainder_from_user" min="0" max="9999800001" required/>
            </div>
        </div>

        <div class="submit_btn_div">
            <button type="submit" class="question_done_btn">Done!</button>
        </div>
      </div>
      <button class="next_question_btn">&#8250;</button>
    </div>
    </div>


    <div class="test_form">
      <h1>Fill them!</h1>
      <div class="main_form">
        <form action="">
          <div class="form_element">
            <label for="student_name">Your Name</label>
            <input type="text" name="student_name" id="student_name" required/>
          </div>
          <div class="form_element">
            <label for="questions_type">Questions of</label>
            <select name="questions_type" id="questions_type" required>
              <option value="addition">Addition</option>
              <option value="subtraction">Subtraction</option>
              <option value="multiplication">Multiplication</option>
              <option value="division">Division</option>
            </select>
          </div>
          <div class="form_element">
            <label for="difficulty">Difficulty Level</label>
            <select name="difficulty" id="difficulty" required onchange="change_max_attr_val()">
              <option value="very_easy">Very Easy (1-10)</option>
              <option value="easy">Easy (11-50)</option>
              <option value="medium">Medium (50-100)</option>
              <option value="hard">Hard (100-1000)</option>
              <option value="very_hard">Very Hard (1000-10,000)</option>
            </select>
          </div>
          <div class="form_element">
            <label for="no_of_ques" id="no_of_ques_label">No. of Questions (below 56)</label>
            <input type="number" name="no_of_ques" id="no_of_ques" min="1" max="55" required/>
          </div>

          <div class="form_element negmark_div">
            <input type="checkbox" name="negmarking" id="negmarking" />
            <label for="negmarking">Negative Marking (-1 for every wrong answer)</label>
          </div>

          <!-- <div class="form_element">
            <label for="time_limit">Time Limit (Optional)</label>
            <input type="number" name="time_limit" id="time_limit" />
            <select name="H_M" id="H_M">
              <option value="hours">Hours</option>
              <option value="minutes">Minutes</option>
            </select>
          </div> -->
          <div class="form_element">
            <input type="submit" value="GET SET GO!!!" id="submit_test_form" />
          </div>
        </form>
      </div>
    </div>

    <div class="volume_control_container">
      <ul>
        <li>
          <img src ="../assets/images/zero_volume.png" title="Zero Volume">
        </li>
        <li>
          <!-- default volume(slider position) set to 0 -->
          <input type="range" min="0" max="10" value="0" class="slider" id="volume_slidebar">
        </li>
        <li>
          <img src ="../assets/images/full_volume.png" title="Full Volume">
        </li>
      </ul>
    </div>
    <div class="Homepage_Exit">
<a href="../index.html"><img src="../assets/images/icons-home-page.png"></a>
<a href="./main.html"><img src="../assets/images/icons-x.png"></a>
</div>
    <audio src="../assets/audio/fun_bg_music.mp3" class="background_music">
    <audio src="../assets/audio/final_question.mp3" class="final_question">
    <audio src="../assets/audio/click.mp3" class="click_sound">
    <audio src="../assets/audio/test_page_bg_music.mp3" class="test_page_bg_music">

  </body>
  <script src="../js/main.js"></script>
  <script src="../js/basic.js"></script>


</html>