msm/practice.html at main · ahson01/msm · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice Quiz</title>
  <link rel="stylesheet" href="global.css">
  <link rel="stylesheet" href="practice.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script src="vc.js"></script>


</head>
<body>
  <div class="navbar" id="nav">
    <li><a class="bold">MSM</a></li>
    <div class="nav-content">
      <ul>
        <li><a href="./index.html">home</a></li>
        <li><a href="./practice.html#+by99">practice</a></li>
        <li><a href="./credit.html">more</a></li>
      </ul>
    </div>
  </div>
  <audio id="bg-music" src="./sagun - worst day.mp3" loop></audio>

  <!-- Custom button to control playback -->
  <button id="playButton">🔊</button>

  <h1 id="question"></h1>
  <form id="answerForm">
    <input type="text" autocomplete="off" id="answerInput" placeholder="000">
    <button type="submit" id="submitButton">Submit Answer</button>
  </form>


  <p>For answers with decimals, write only till 2nd place.</p>


</body>
</html>
<script>
window.addEventListener("hashchange", function() {
  window.location.reload(); // Reload the page on hash change
});

</script>
<script>
const questionEl = $("#question");
const answerInput = $("#answerInput");
const answerForm = $("#answerForm");

let currentQuestion;
let correctAnswer;
let scoreCorrect = 0;
let scoreTotal = 0;
let totalTime = 0;
let questionStartTime;

const scoreDisplay = $("<div>").appendTo("body");
const timeDisplay = $("<div>").appendTo("body");

function generateQuestion() {
  const urlParts = window.location.href.split("#");
  const hashParams = urlParts[1] ? urlParts[1].split("by") : [];

  if (hashParams.length !== 2 || isNaN(parseInt(hashParams[1]))) {
    questionEl.text("Invalid URL parameters. Please use format: practice.html#<operation>by<maxNumber>");
    return;
  }

  let operation = hashParams[0];
  const maxNumber = parseInt(hashParams[1]);

  const generateNumbers = () => Math.floor(Math.random() * maxNumber) + 1;

  if (operation === "all") {
    const operations = Object.keys(operators);
    operation = operations[Math.floor(Math.random() * operations.length)];
  }

  let num1 = generateNumbers();
  let num2 = generateNumbers();

  currentQuestion = `${num1} ${operation} ${num2}`;
  correctAnswer = operators[operation](num1, num2);

  if (operation === "/") {
    correctAnswer = Math.round(correctAnswer * 100) / 100;
  }

  questionEl.text(currentQuestion).hide().fadeIn(500);
  answerInput.val("").hide().fadeIn(500);
  questionStartTime = new Date();
}

const operators = {
  "x": (num1, num2) => num1 * num2,
  "/": (num1, num2) => (num2 !== 0 ? num1 / num2 : "Division by zero is not allowed"),
  "+": (num1, num2) => num1 + num2,
  "-": (num1, num2) => num1 - num2,
};

answerForm.on("submit", function (event) {
  event.preventDefault();

  const userAnswer = answerInput.val();
  questionEl.removeClass("incorrect correct");

  if (userAnswer === String(correctAnswer)) {
    questionEl.addClass("correct").text("Correct!").animate({ fontSize: "70px" }, 300);
    scoreCorrect++;
  } else {
    questionEl.addClass("incorrect").text(`Incorrect. ${correctAnswer}`).animate({ fontSize: "70px" }, 300);
  }

  scoreTotal++;

  const questionEndTime = new Date();
  const timeTaken = (questionEndTime - questionStartTime) / 1000;
  totalTime += timeTaken;
  const averageTime = totalTime / scoreTotal;

  timeDisplay.text(`Time: Last: ${timeTaken.toFixed(2)}s, Average: ${averageTime.toFixed(2)}s`).hide().fadeIn(500);

  setTimeout(() => {
    generateQuestion();
  }, 300);

  const accuracy = (scoreCorrect / scoreTotal) * 100;
  scoreDisplay.text(`Score: Correct: ${scoreCorrect}, Incorrect: ${scoreTotal - scoreCorrect}, Accuracy: ${accuracy.toFixed(2)}%`).hide().fadeIn(500);
});

generateQuestion();

</script>
<script>
$(document).ready(function () {
    // Hide the body initially
    $('body').hide();

    // Fade in the body with a duration of 1000 milliseconds (1 second)
    $('body').fadeIn(1000);
});

</script>