Find_Math_Gaps/index.html at main · scoots38/Find_Math_Gaps · 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Multi-Tree Question Flow</title>
</head>
<body>
  <h1>Select the math class you are in</h1>
  <div id="menu">
    <button onclick="startTree('geometry')">Geometry</button>
    <button onclick="startTree('algebra')">Algebra</button>
  </div>

  <div id="questionBox" style="margin-top:20px;"></div>

  <script>
    const trees = {
      geometry: {
        q1: {
          question: "If the shorter sides of a right triangle are 3 inches and 4 inches, what is the length of the longest side?",
          answers: {
            "5": "q2",
            "6": "q3"
          }
        },
        q2: {
          question: "How many radians are in a semicircle?",
          answers: {
            "3": "some_correct_end",
            pi: "all_correct_end",
            "2pi": "some_correct_end"
          }
        },
        q3: {
          question: "How many degrees do all the angles of a triangle add up to?",
          answers: {
            "180": "some_correct_end",
            "200": "none_correct_end",
            "360": "none_correct_end"
          }
        },
        none_correct_end: {
          question: "We have a lot to work on to get you ready for geometry, but you can do it!",
          answers: {
            Restart: "restart"
          }
        },
        some_correct_end: {
          question: "Good job, but we have some gaps we need to fill!",
          answers: {
            Restart: "restart"
          }
        },
        all_correct_end: {
          question: "Nice Work! You are going to do great in Geometry!",
          answers: {
            Restart: "restart"
          }
        }
      },
      algebra: {
        q1: {
          question: "What is x? 3 + x = 5",
          answers: {
            "2": "q2",
            "1": "none_correct_end"
          }
        },
        q2: {
          question: "What is x? x^2 + 3 = 12",
          answers: {
            "3 or -3": "all_correct_end",
            "2 or -2": "some_correct_end"
          }
        },
        none_correct_end: {
          question: "We have a lot to work on to get you ready for algebra, but you can do it!",
          answers: {
            Restart: "restart"
          }
        },
        some_correct_end: {
          question: "Good job, but we have some gaps we need to fill!",
          answers: {
            Restart: "restart"
          }
        },
        all_correct_end: {
          question: "Nice Work! You are going to do great in Algebra!",
          answers: {
            Restart: "restart"
          }
        }
      }
    };

    let currentTree = null;

    function startTree(treeName) {
      currentTree = trees[treeName];
      document.getElementById('menu').style.display = 'none';
      nextQuestion('q1');
    }

    function nextQuestion(id) {
      const container = document.getElementById('questionBox');
      const q = currentTree[id];
      if (!q) return;
      container.innerHTML = `<p>${q.question}</p>` +
        Object.entries(q.answers).map(
          ([label, nextId]) =>
            `<button onclick="${nextId === 'restart' ? 'location.reload()' : `nextQuestion('${nextId}')`}">${label}</button>`
        ).join('');
    }
  </script>
</body>
</html>