index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/logo.png">
  <link rel="stylesheet" href="./style.css">

  <!-- This file contains Questions and Options only -->
  <script type="text/javascript" src="./questions.js"></script>
  
  <!-- Quiz Code -->
  <script defer type="text/javascript" src="./index.js" onload="startQuiz()"></script>
  
  <!-- Configuration for MathJax inline rendering-->
  <script>
    MathJax = { 
      tex: {
        inlineMath: [['$latex', '$'], ['\\(', '\\)']]
      },
    };
    </script>
  
  <!-- Importing MathJax-->
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-chtml.js"></script>
  
  <title>Quiz App with LaTeX rendering</title>

</head>
<body>
  <noscript>
    You need to enable JavaScript to use this app
  </noscript>
  <!-- Quiz Box -->
  <div class="quiz_box">
    <header class="quiz_header">
        <h1 class="quiz_title">Double integrals quiz</h1>
        <div class="logo_container">
            <img src="./assets/logo.png" width="40px">
        </div>
        <div class="questions_line"></div>
    </header>
    <section>
        <div class="current_question">
            <!-- Current question inserted here -->
        </div>
        <div class="option_list">
            <!-- Question options inserted here -->
        </div>
      </section>

    <!-- Quiz box footer-->
    <footer class="quiz_footer">
        <div class="question_counter">
            <!-- Question counter inserted here -->
        </div>
        <button class="next_btn">Next</button>
    </footer>
  </div>

<!-- Result Box -->
  <section class="result_box">
    <div class="icon_result">
        <img src="./assets/well-done-animation.gif" alt="well-done-animation"width="150" style="vertical-align:middle;margin:50px 50px">
    </div>
    <div class="complete_text">You have completed the quiz!</div>
    <div class="score_text">
        <!-- Score result inserted here -->
    </div>
    <div class="buttons">
        <button class="restart">Try again</button>
    </div>
  </section>
  
</body>
</html>