JavaScript/hw3part4.html at master · marbleindex/JavaScript · 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
<!DOCTYPE html>
<html lang="en">
   <head>
      <!--Kristian Reyes 9/26/2020 -->
      <title>CNIT 133 Homework 3</title>
      <meta charset="utf-8">
      <meta name="description" content="homework 3 for CCSF CNIT 133">
      <meta name="keywords" content="HTML, CSS, Javascript, CCSF, Student">
      <meta name="author" content="Kristian Reyes">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!--bootstrap    -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
         ></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <!--bootstrap    -->
      <script>
         var num1 = 0;
         var num2 = 0;


         function startGame() {
            num1 = Math.floor(Math.random() * 10);
            num2 = Math.floor(Math.random() * 10);
            var query = "How much is " + num1 + " times " + num2 + "?";
            document.getElementById("query").innerHTML = query;


         }

         function checkAnswer() {
         document.getElementById("queryans").innerHTML = query;
         var numguess = document.getElementById("numguess").value;
         var answer = num1 * num2;

         if (numguess == answer) {
                   document.getElementById("result").innerHTML =  "Very good!";
                   confirmStatement();
         }else{


         document.getElementById("result").innerHTML =  "No. Please try again.";
         }}


         function confirmStatement() {
         var txt;
         var r = confirm("Continue?");
         if (r == true) {
         txt = "Next question coming up!";
         startGame();
         } else {
         txt = "Thanks for playing!";
         document.getElementById("demo").innerHTML = txt;
         document.getElementById("queryans").innerHTML = "";
         }}

      </script>

     <body onload="startGame()">
      <main class="grid">
         <header  class="grid-area grid-area-1">
            <h2> Homework 3 - Part 1 </h2>
         </header>
         <nav class="grid-area grid-area-2">
            <ul>
               <li>
                  <a href="homework3.html" title="CNIT 133 - HW 3">
                  Return to CNIT 133 Homework 3 - Functions
                  </a>
               </li>
            </ul>
         </nav>
         <section class="grid-area grid-area-3">
            <h3>Practice Your Multiplication Skills!</h3>
            <div id="result"></div>
            <p id="demo"></p>
            <br><br>
            <form name="myform" id="myform">
               <b id="query"></b>
               <b id="queryans"></b>
               <input id="numguess" name="numguess" type="number" >
               <br>
               <br>
               <br>
               <input  type="button" value="Let's Play!" onclick="startGame()">
               <input  type="button" value="Submit Answer" onclick="checkAnswer();">
            </form>
         </section>
         <footer class="grid-area grid-area-4">
            <p>
               &#169; 2020 Kristian Reyes
            </p>
         </footer>
      </main>
   </body>
</html>