Google_map_Quiz/csunmap.html at main · madhavijaival/Google_map_Quiz · 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
<!DOCTYPE html>
<html>

<head>
    <title>CSUN map</title>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</head>


<body>
    <h2>My Interactive map!</h2>
    <!--The div element for the map -->
    <div class="column-narrow">
        <h4> Map Quiz </h4>

        <h4> Please double click on the map the loction of:</h4>
        <p class="place" id="p1">Where is Oviatt Library?</p>
        <p class="libR Right">Your answer is correct :) It's Oviatt Library</p>
        <p class="libW Wrong">Your answer is incorrect.</p>

        <p class="place" id="p2">Where is Sustainability Center?</p>
        <p class="scR Right">Your answer is correct :) It's Sustainability Center</p>
        <p class="scW  Wrong">Your answer is incorrect.</p>

        <p class="place" id="p3">Where is Redwood Hall?</p>
        <p class="rhR Right">Your answer is correct :)It's Redwood hall</p>
        <p class="rhW Wrong">Your answer is incorrect.</p>

        <p class="place" id="p4">Where is Student Recreational Center?</p>
        <p class="srR Right">Your answer is correct :)It's SRC</p>
        <p class="srW  Wrong">Your answer is incorrect.</p>

        <p class="place" id="p5">Where is Sierra hall?</p>
        <p class="shR Right">Your answer is correct :)It's Sierra hall</p>
        <p class="shW  Wrong">Your answer is incorrect.</p>

        <h1 id="tot"></h1>

    </div>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
        src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&callback=initMap&libraries=&v=weekly"
        async></script>
    &nbsp;
    <div class="inner">
        <h3>Copyrights © Madhavi Jaival</h3>
    </div>

</body>

</html>