<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/login.css">
</head>
<body>
    <header>
        <div class="logo-con">
           <a href="/">
            <p>
                <span class="p">P</span>
                <span class="p-all">ool Quiz</span>
            </p>
           </a>
        </div>
        <div class="nav-links-con">
            <ul class="links">
                <li class="link"> <a href="/browse">Browse </a></li>
                <li class="link"> <a href="/add-question">Create Question </a></li>
                <li class="link"> <a href="/api-setting">API </a></li>
                <li class="link"> <a href="/login">Login </a></li>
            </ul>
        </div>
    </header>

    <main>

        <div class="container-md">
            <h2>Add new question</h2>

            <form>
          

                <div class="mb-3">
                    <div class="row">
                        <div class="col">
                            <label for="category" class="form-label">Category</label>
                            <select id="category" class="form-select" aria-label="Default select example">
                                <option selected>Any Category</option>
                                <option selected value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                              </select>
                        </div>
                        <div class="col">
                            <label for="question-type" class="form-label">Type:</label>
                            <select id="question-type" class="form-select" aria-label="Default select example" onchange="checkSelectedType()">
                    
                                <option selected value="1">Multiple Choice</option>
                                <option value="2">True / False</option>
                              </select>
                        </div>
                        <div class="col">
                            <label for="Difficulty" class="form-label">Difficulty:</label>
                            <select id="Difficulty" class="form-select" aria-label="Default select example" >
                                <option selected value="1">Easy</option>
                                <option value="2">Medium</option>
                                <option value="3">Hard</option>
                              </select>
                          </div>
                    </div>
                </div>

                <div class="typeA" id="multiple">
                    <div class="mb-3">
                        <label for="Question" class="form-label">Question</label>
                        <input type="text" class="form-control" id="Question">
                      </div>
                      <div class="mb-3">
                        <div class="row g-3">
                            <div class="col">
                            <label for="answer" class="form-label">Correct Answer</label>
                              <input type="text" class="form-control" aria-label="First name" id="answer">
                            </div>
                            <div class="col">
                                <label for="incorrect1" class="form-label">Incorrect Answer #1</label>
                                  <input type="text" class="form-control"  aria-label="First name" id="incorrect1">
                                </div>
                          </div>
    
                          <div class="row g-3">
                            <div class="col">
                            <label for="incorrect2" class="form-label">Incorrect Answer #2</label>
                              <input type="text" class="form-control" aria-label="First name" id="incorrect2">
                            </div>
                            <div class="col">
                                <label for="incorrect3" class="form-label">Incorrect Answer #3</label>
                                  <input type="text" class="form-control"  aria-label="First name" id="incorrect3">
                                </div>
                          </div>
                      </div>
    
                </div>

                <div style="display: none;"  class="typeB" id="truefalse">
                    <div class="mb-3">
                        <label for="Question" class="form-label">Statement</label>
                        <input type="text" class="form-control" id="Question">
                      </div>


                      <div class="mb-3">
                        <label for="correctAnswer" style="font-size: large; font-weight: 500;">Correct Answer</label>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="correctAnswer" id="trueOption" value="True">
                            <label class="form-check-label" for="trueOption">True</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="correctAnswer" id="falseOption" value="False">
                            <label class="form-check-label" for="falseOption">False</label>
                        </div>
                      </div>

                </div>
          
                  <div class="mb-3">
                    <label for="Question" class="form-label">References [Provide Links to Respected Sources]</label>
                    <input type="text" class="form-control" id="Question">
                  </div>
                
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>
              
               
               
               
              </form>


        </div>

    </main>


    <footer>

    </footer>


    <script>

        const typeA = document.getElementById('multiple')
        const typeB = document.getElementById('truefalse')

        function checkSelectedType(){
            const selectType = document.getElementById('question-type').value
            if(selectType == 2){
                typeB.style.display = 'block'
                typeA.style.display = 'none'
            }else if(selectType == 1){
                typeA.style.display = 'block'
                typeB.style.display = 'none'
            }
        }


    </script>


    
</body>
</html>