title: How do I create a quiz app with three different answer modes?
body: <p>I am trying to create a quiz app which should feature 5 questions, chosen randomly from a bank of questions. But, the there should be three different ways of answering the questions :</p>
  <ol>
  <li>At least one should use radio buttons</li>
  <li>At least one should use a drop down</li>
  <li>At least one should use text input</li>
  </ol>
  <p>How do I create this please ? I don't have a JS file yet, I don't mind you creating a JS file.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,regular,500,600,700,800,900);
  :root {
      --background: rgb(29, 26, 26);
      --text-color: rgb(255, 255, 255);
  }
  
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  body {
      background-color: var(--background);
      font-family: 'Poppins', sans-serif;
  }
  
  .quiz-container {
      margin: 30px auto;
      width: 70%;
      text-align: center;
  }
  
  .header h3 {
      color: var(--text-color);
      font-size: 30px;
  }
  
  .question-tog {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 50%;
      margin: 0 auto;
  }
  
  button {
      padding: 8px 35px;
      cursor: pointer;
      border-radius: 5px;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 20px;
  }
  
  i {
      font-size: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Interactive Quiz App&lt;/title&gt;
      &lt;link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'&gt;
      &lt;link rel="stylesheet" href="/quiz/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="quiz-container"&gt;
          &lt;div class="header"&gt;&lt;h3&gt;Interactive Quiz App&lt;/h3&gt;&lt;/div&gt;
  
          &lt;div class="quiz"&gt;
              
          &lt;/div&gt;
  
          &lt;div class="question-tog"&gt;
              &lt;button class="prev"&gt; &lt;span&gt;Prev&lt;/span&gt; &lt;i class='bx bx-left-arrow-alt'&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;button class="next"&gt; &lt;span&gt;Next&lt;/span&gt; &lt;i class='bx bx-right-arrow-alt'&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>