Week 8/trivia/index.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">

        <title>Trivia!</title>

        <script>
            $(document).ready(function() {

                $("button#gw").click( function () {
                    $(this).css("background-color", "red");
                    $("#feedback1").html("Incorrect");
                });
                $("button#ah").click( function () {
                    $(this).css("background-color", "green");
                    $("#feedback1").html("Correct!");
                });
                $("button#jg").click( function () {
                    $(this).css("background-color", "red");
                    $("#feedback1").html("Incorrect");
                });
                $("button#gc").click( function () {
                    $(this).css("background-color", "red");
                    $("#feedback1").html("Incorrect");
                });

                $("button#check").click( function () {
                    $(this).text("Submitted!");
                    let answer = $('#q2').val();
                    if (answer === "Thomas Jefferson") {
                        $("#feedback2").html("Correct!");
                        $("#q2").css("background-color", "green");
                    }
                    else {
                        $("#feedback2").html("Incorrect. <br> The answer is Thomas Jefferson.");
                        $("#q2").css("background-color", "red");
                    }
                }); 
            });
        </script>

    </head>

    <body>
        <div class="jumbotron">
            <h1>Trivia!</h1>
        </div>

        <div class="container">

            <div class="section1">
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <h3>Who was NOT a president of the United States?</h3>

                <button id="gw">George Washington</button>
                <button id="ah">Alexander Hamilton</button>
                <button id="jg">James Garfield</button>
                <button id="gc">Grover Cleveland</button>

                <p id="feedback1"></p>

            </div>

            <div class="section2">
                <h2>Part 2: Free Response</h2>
                <hr>

                <h3>Who was the third president of the United States?</h3>
                <input id="q2" type="text" placeholder="Answer"></input>
                <button id="check">Check</button>

                <p id="feedback2"></p>
            </div>

        </div>
    </body>
</html>