kjpProject/exampleQuiz.html at master · Poonam-raj/kjpProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>

<head>
    <title>Which Austin Musical Group...</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Helvetica;
        }

        #main {
            width: 60%;
            border: 1px gray solid;
            margin: auto;
            padding: 10px;
            background-color: white;
            border-radius: 10px;
        }

        #header {
            margin-top: 0;
            border: 2px solid black;
            padding: 5px;
            height: 250px;
        }

        label {
            width: 150px;
            display: inline-block;
        }

        button {
            display: block;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="header">
            <h1>Which Austin musical act are you most like?</h1>
        </div>

        <form id="form1">
            <p>How old are you?</p>
            <label><input type="radio" name="age" id="young" value="1" />under 18</label>
            <label><input type="radio" name="age" id="mid" value="2" />19-34</label>
            <label><input type="radio" name="age" id="old" value="3" />34+</label>

            <p>What would you prefer to do?</p>
            <label><input type="radio" name="activity" id="party" value="1" />Party</label>
            <label><input type="radio" name="activity" id="rock" value="2" />Rock out</label>
            <label><input type="radio"  name="activity" id="beer" value="3" />Drink beer</label>

            <p>What's your favorite style of music?</p>
            <label><input type="radio" name="genre" id="rock2" value="1" />Rock</label>
            <label><input type="radio" name="genre" id="indie" value="2" />Indie</label>
            <label><input type="radio" name="genre" id="country" value="3" />Country</label>


            <button type="submit" value="Submit">Submit</button>

        </form>

        <p id="answer"></p>
        <p id="answer2"></p>
    </div>
    <script>
        document.getElementById("form1").onsubmit = function() {


                age = parseInt(document.querySelector('input[name = "age"]:checked').value);

                activity = parseInt(document.querySelector('input[name = "activity"]:checked').value);

                genre = parseInt(document.querySelector('input[name = "genre"]:checked').value);

                total = age + activity + genre;


                document.getElementById("answer").innerHTML = total;

                if (total < 4) {
                    document.getElementById("answer2").innerHTML = "You got Quiet Company.";
                }

                if (total >= 4 && total < 7) {
                    document.getElementById("answer2").innerHTML = "You got Spoon.";
                }

                if (total >= 7) {
                    document.getElementById("answer2").innerHTML = "You got Willie Nelson.";
                }

                return false; // required to not refresh the page; just leave this here
            } // end the submit function
    </script>

</body>

</html>