From 430ae474a81f29a823bee725b830f3f778e0e2ff Mon Sep 17 00:00:00 2001
From: RasperMaths <131694670+RasperRevision@users.noreply.github.com>
Date: Fri, 5 Jul 2024 16:26:10 +0100
Subject: [PATCH] tidied up and fixed bugs

---
 fill-in-the-blank/index.html | 443 +++++++++++++++++------------------
 index.html                   | 421 ++++++++++++++++-----------------
 2 files changed, 421 insertions(+), 443 deletions(-)

diff --git a/fill-in-the-blank/index.html b/fill-in-the-blank/index.html
index baafcd7..973bb07 100644
--- a/fill-in-the-blank/index.html
+++ b/fill-in-the-blank/index.html
@@ -89,254 +89,249 @@ <h1 class="text-black mt-3">Fill in the blank</h1>
 
   <script>
     const themesElement = document.getElementById("themes");
-const quoteElement = document.getElementById("quote");
-const inputElement = document.getElementById("input");
-const submitButton = document.getElementById("submit-btn");
-const nextButton = document.getElementById("next-btn");
-const resultElement = document.getElementById("result");
-const score = document.querySelector('.score');
-const stopwatch = document.querySelector('.stopwatch');
-
-let shuffledQuotes;
-let score_value, length;
-let s = 0, m = 0;
-
-function getParameterByName(name, url) {
-  if (!url) url = window.location.href;
-  name = name.replace(/[\[\]o]()-=+.$@#%^&*/g, "\\$&");
-  var regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`), results = regex.exec(url);
-  if (!results) return null;
-  if (!results[2]) return '';
-  return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
-
-function loadJSON(callback) {
-  var xobj = new XMLHttpRequest();
-  xobj.overrideMimeType("application/json");
-  xobj.open('GET', `${jsonFileName}.json`, true);
-  xobj.onreadystatechange = function () {
-    if (xobj.readyState == 4 && xobj.status == 200) { callback(JSON.parse(xobj.responseText)); }
-  };
-  xobj.send(null);
-}
-
-function shuffle(array) {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
-}
-
-function displayQuote() {
-  const quoteObj = shuffledQuotes[score_value];
-  const themesTitleCase = quoteObj.themes.map(theme => toTitleCase(theme));
-  themesElement.textContent = `${themesTitleCase.join(", ")}`;
-  quoteElement.textContent = maskQuote(quoteObj.quote);
-}
-
-function toTitleCase(str) {
-  return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-}
-
-function maskQuote(quote) {
-  return quote.replace(/\b\w+(?:[']\w+)?|[^\s]/g, match => {
-    if (match.trim() === "") return match;
-    if (/[^a-zA-Z]/.test(match)) return match;
-    if (Math.random() < 0.4) return "_".repeat(match.length);
-    else return match;
-  });
-}
-
-function removePunctuation(text) {
-  return text.replace(/[.,\/#!$%\^&\*;:{}=\-_~()]/g, "").replace(/\s{2,}/g, " ");
-}
-
-function checkInput() {
-  const userGuess = removePunctuation(inputElement.value.trim());
-  const actualQuote = shuffledQuotes[score_value].quote;
-  let correct = userGuess.toLowerCase() === removePunctuation(actualQuote.toLowerCase());
-  resultElement.textContent = correct ? "Correct!" : `Incorrect. The correct quote is: ${actualQuote}`;
-  resultElement.classList.add(correct ? 'alert-success' : 'alert-danger');
-  if (correct) {
-    submitButton.classList.add('invis');
-    nextButton.classList.remove('invis');
-  } else {
-    setTimeout(function () {
-      resultElement.textContent = "";
-      inputElement.value = "";
-    }, 2000)
-  }
-}
-
-function nextQuote() {
-  score_value++;
-  updateScore();
-  if (score_value == length) {
-    clearInterval(timer);
-
-    const home = document.createElement('button');
-    home.textContent = 'Home';
-    home.classList.add('btn', 'btn-primary', 'ms-4');
-    home.addEventListener('click', function () { location.href = '/'; });
-
-    const restart = document.createElement('button');
-    restart.textContent = 'Restart';
-    restart.classList.add('btn', 'btn-warning');
-    restart.addEventListener('click', function () { location.reload(); });
-
-    document.querySelector('.container').innerHTML = `Complete <div style="font-size:100px;color:black;"> ${pad(m)}:${pad(s)}</div>`;
-    document.querySelector('.container').classList.add('text-black', 'text-center')
-    document.querySelector('.container').appendChild(home)
-    document.querySelector('.container').appendChild(restart);
-  } else {
-    inputElement.value = "";
-    resultElement.textContent = "";
-    submitButton.classList.remove('invis');
-    nextButton.classList.add('invis');
-    displayQuote();
-  }
-}
-
-function startStopwatch() {
-  timer = setInterval(function () {
-    s++;
-    if (s === 60) {
-      s = 0;
-      m++;
+    const quoteElement = document.getElementById("quote");
+    const inputElement = document.getElementById("input");
+    const submitButton = document.getElementById("submit-btn");
+    const nextButton = document.getElementById("next-btn");
+    const resultElement = document.getElementById("result");
+    const score = document.querySelector('.score');
+    const stopwatch = document.querySelector('.stopwatch');
+
+    let shuffledQuotes;
+    let score_value, length;
+    let s = 0, m = 0;
+
+    function getParameterByName(name, url) {
+      if (!url) url = window.location.href;
+      name = name.replace(/[\[\]o]()-=+.$@#%^&*/g, "\\$&");
+      var regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`), results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return '';
+      return decodeURIComponent(results[2].replace(/\+/g, " "));
     }
 
-    formattedTime = pad(m) + ':' + pad(s);
-    stopwatch.textContent = formattedTime;
-  }, 1000);
-}
-
-function pad(value) { return value < 10 ? '0' + value : value; }
-
-submitButton.addEventListener("click", function () { checkInput(); });
-nextButton.addEventListener("click", function () { nextQuote(); });
-
-inputElement.addEventListener("keypress", function (event) {
-  if (event.key === "Enter") {
-    event.preventDefault();
-    if (nextButton.classList.contains('invis')) { checkInput(); }
-    else { nextQuote(); }
-  }
-});
-
-function getSubjectJSON() {
-  getJSON().then((data) => {
-    var dropdownHTML = '<div class="accordion mt-3" id="subjectAccordion">';
-    data.forEach((item) => {
-      const subject = item.displayName.replace(/\s/g, "");
-      var topics = "";
-      item.topics.forEach((topic) => {
-        var binary_games = topic.games.toString(2);
-        while (binary_games.length < 4) {
-          binary_games = "0" + binary_games;
-        }
-        if (binary_games[2] == "1") {
-          topics += `<a href="?json=${topic.jsonFile}" class="subject_link link-offset-1 link-light link-underline-opacity-50 link-underline-opacity-100-hover">${topic.displayName}</a>`;
-        }
+    function loadJSON(callback) {
+      var xobj = new XMLHttpRequest();
+      xobj.overrideMimeType("application/json");
+      xobj.open('GET', `${jsonFileName}.json`, true);
+      xobj.onreadystatechange = function () {
+        if (xobj.readyState == 4 && xobj.status == 200) { callback(JSON.parse(xobj.responseText)); }
+      };
+      xobj.send(null);
+    }
+
+    function shuffle(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      return array;
+    }
+
+    function displayQuote() {
+      const quoteObj = shuffledQuotes[score_value];
+      const themesTitleCase = quoteObj.themes.map(theme => toTitleCase(theme));
+      themesElement.textContent = `${themesTitleCase.join(", ")}`;
+      quoteElement.textContent = maskQuote(quoteObj.quote);
+    }
+
+    function toTitleCase(str) {
+      return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+    }
+
+    function maskQuote(quote) {
+      return quote.replace(/\b\w+(?:[']\w+)?|[^\s]/g, match => {
+        if (match.trim() === "") return match;
+        if (/[^a-zA-Z]/.test(match)) return match;
+        if (Math.random() < 0.4) return "_".repeat(match.length);
+        else return match;
       });
-      if (topics != "") {
-        dropdownHTML += `<div class="accordion-item" style="background: none !important; border: none;"><h2 class="accordion-header" id="${subject}"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#collapse{subject}" aria-expanded="false" aria-controls="collapse${subject}">${item.displayName}</button></h2><div id="collapse${subject}" class="accordion-collapse collapse" aria-labelledby="${subject}"data-bs-parent="#subjectAccordion"><div class="accordion-body"><ul class="list-group" id="${subject}ListGroup">${topics}</ul></div></div></div>`;
+    }
+
+    function removePunctuation(text) {
+      return text.replace(/[.,\/#!$%\^&\*;:{}=\-_~()]/g, "").replace(/\s{2,}/g, " ");
+    }
+
+    function checkInput() {
+      const userGuess = removePunctuation(inputElement.value.trim());
+      const actualQuote = shuffledQuotes[score_value].quote;
+      let correct = userGuess.toLowerCase() === removePunctuation(actualQuote.toLowerCase());
+      resultElement.textContent = correct ? "Correct!" : `Incorrect. The correct quote is: ${actualQuote}`;
+      resultElement.classList.add(correct ? 'alert-success' : 'alert-danger');
+      if (correct) {
+        submitButton.classList.add('invis');
+        nextButton.classList.remove('invis');
+      } else {
+        setTimeout(function () {
+          resultElement.textContent = "";
+          inputElement.value = "";
+        }, 2000)
+      }
+    }
+
+    function nextQuote() {
+      score_value++;
+      updateScore();
+      if (score_value == length) {
+        clearInterval(timer);
+
+        const home = document.createElement('button');
+        home.textContent = 'Home';
+        home.classList.add('btn', 'btn-primary', 'ms-4');
+        home.addEventListener('click', function () { location.href = '/'; });
+
+        const restart = document.createElement('button');
+        restart.textContent = 'Restart';
+        restart.classList.add('btn', 'btn-warning');
+        restart.addEventListener('click', function () { location.reload(); });
+
+        document.querySelector('.container').innerHTML = `Complete <div style="font-size:100px;color:black;"> ${pad(m)}:${pad(s)}</div>`;
+        document.querySelector('.container').classList.add('text-black', 'text-center')
+        document.querySelector('.container').appendChild(home)
+        document.querySelector('.container').appendChild(restart);
+      } else {
+        inputElement.value = "";
+        resultElement.textContent = "";
+        submitButton.classList.remove('invis');
+        nextButton.classList.add('invis');
+        displayQuote();
+      }
+    }
+
+    function startStopwatch() {
+      timer = setInterval(function () {
+        s++;
+        if (s === 60) {
+          s = 0;
+          m++;
+        }
+
+        formattedTime = pad(m) + ':' + pad(s);
+        stopwatch.textContent = formattedTime;
+      }, 1000);
+    }
+
+    function pad(value) { return value < 10 ? '0' + value : value; }
+
+    submitButton.addEventListener("click", function () { checkInput(); });
+    nextButton.addEventListener("click", function () { nextQuote(); });
+
+    inputElement.addEventListener("keypress", function (event) {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (nextButton.classList.contains('invis')) { checkInput(); }
+        else { nextQuote(); }
       }
     });
-    dropdownHTML += '</div>';
-    return dropdownHTML;
-  });
-}
 
-async function getJSON() {
-  return await ((await fetch('/subjects.json')).json());
-}
+    async function getJSON() {
+      return await ((await fetch('/subjects.json')).json());
+    }
 
-function updateScore() { score.textContent = `${score_value}/${length}`; }
+    function updateScore() { score.textContent = `${score_value}/${length}`; }
 
-function blank(topic, subject) {
-  let rangeInput, rangeLabel, modal;
-  if (topic != null && subject != null) {
-    const modalContainer = document.createElement('div');
-    const modalHtml = '<div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title text-black">Fill in the blank</h5></div><div class="modal-body"><p class="text-black mb-1">Subject: <span id="subject" class=text-black></span><br>Topic: <span id="topic" class=text-black></span><br><br>Game type:</p><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked><label class="form-check-label text-black" for="flexRadioDefault1" id="complete"></label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"><label class="form-check-label text-black" for="flexRadioDefault2">Number of questions to finish: <label class="form-label text-black" for="customRange1" id="rangeLabel">1</label><div data-mdb-range-init class="range d-inline w-auto"><input type="range" class="form-range" id="customRange1" min="1" max="100" value="1" /></div></label></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" onclick="location.href=\'/fill-in-the-blank\'">Cancel</button><button type="button" class="btn btn-primary begin-game">Begin game</button></div></div></div></div>';
+    function blank(topic, subject) {
+      let rangeInput, rangeLabel, modal;
+      if (topic != null && subject != null) {
+        const modalContainer = document.createElement('div');
+        const modalHtml = '<div class="modal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h5 class="modal-title text-black">Fill in the blank</h5></div><div class="modal-body"><p class="text-black mb-1">Subject: <span id="subject" class=text-black></span><br>Topic: <span id="topic" class=text-black></span><br><br>Game type:</p><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked><label class="form-check-label text-black" for="flexRadioDefault1" id="complete"></label></div><div class="form-check"><input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"><label class="form-check-label text-black" for="flexRadioDefault2">Number of questions to finish: <label class="form-label text-black" for="customRange1" id="rangeLabel">1</label><div data-mdb-range-init class="range d-inline w-auto"><input type="range" class="form-range" id="customRange1" min="1" max="100" value="1" /></div></label></div></div><div class="modal-footer"><button type="button" class="btn btn-secondary" onclick="location.href=\'/fill-in-the-blank\'">Cancel</button><button type="button" class="btn btn-primary begin-game">Begin game</button></div></div></div></div>';
 
-    modalContainer.innerHTML = modalHtml;
+        modalContainer.innerHTML = modalHtml;
 
-    document.body.appendChild(modalContainer);
+        document.body.appendChild(modalContainer);
 
-    modalContainer.querySelector('#subject').textContent = subject;
-    modalContainer.querySelector('#topic').textContent = topic;
+        modalContainer.querySelector('#subject').textContent = subject;
+        modalContainer.querySelector('#topic').textContent = topic;
 
-    rangeInput = document.getElementById('customRange1');
-    rangeLabel = document.getElementById('rangeLabel');
+        rangeInput = document.getElementById('customRange1');
+        rangeLabel = document.getElementById('rangeLabel');
 
-    modal = new bootstrap.Modal(modalContainer.querySelector('.modal'));
-    modal.show();
+        modal = new bootstrap.Modal(modalContainer.querySelector('.modal'));
+        modal.show();
 
-    rangeInput.addEventListener('input', () => {
-      rangeLabel.textContent = rangeInput.value;
-    });
-  }
+        rangeInput.addEventListener('input', () => {
+          rangeLabel.textContent = rangeInput.value;
+        });
+      }
 
-  loadJSON(async function (response) {
-    shuffledQuotes = shuffle(response);
-    length = shuffledQuotes.length;
+      loadJSON(async function (response) {
+        shuffledQuotes = shuffle(response);
+        length = shuffledQuotes.length;
 
-    score_value = 0;
-    updateScore();
-    rangeInput.max = length - 1;
+        score_value = 0;
+        updateScore();
+        rangeInput.max = length - 1;
 
-    document.getElementById("complete").textContent = `Complete (${length} questions)`;
+        document.getElementById("complete").textContent = `Complete (${length} questions)`;
 
-    await new Promise((resolve) => {
-      document.querySelector('.begin-game').addEventListener('click', resolve);
-    });
+        await new Promise((resolve) => {
+          document.querySelector('.begin-game').addEventListener('click', resolve);
+        });
 
-    modal.hide();
+        modal.hide();
 
-    if (document.querySelectorAll(".form-check-input")[1].checked) {
-      length = rangeInput.value;
-      updateScore();
+        if (document.querySelectorAll(".form-check-input")[1].checked) {
+          length = rangeInput.value;
+          updateScore();
+        }
+
+        startStopwatch();
+        displayQuote();
+      });
     }
 
-    startStopwatch();
-    displayQuote();
-  });
-}
-
-document.querySelector(".mobile_nav").style.minHeight = "45px";
-document.querySelector(".mobile_nav_btn").addEventListener('click', function () {
-  document.querySelector('.bi-caret-down-fill').classList.toggle('rotated');
-  if (document.querySelector(".mobile_nav").style.minHeight != '45px') {
-    document.querySelector(".mobile_nav").style.minHeight = '45px';
-    document.querySelector(".accordion_content").innerHTML = '';
-  } else {
-    document.querySelector(".mobile_nav").style.minHeight = 'calc(100vh - 121px)';
-    getSubjectJSON().then((s) => {
-      document.querySelector(".accordion_content").innerHTML = s;
+    document.querySelector(".mobile_nav").style.minHeight = "45px";
+    document.querySelector(".mobile_nav_btn").addEventListener('click', function () {
+      document.querySelector('.bi-caret-down-fill').classList.toggle('rotated');
+      if (document.querySelector(".mobile_nav").style.minHeight != '45px') {
+        document.querySelector(".mobile_nav").style.minHeight = '45px';
+        document.querySelector(".accordion_content").innerHTML = '';
+      } else {
+        document.querySelector(".mobile_nav").style.minHeight = 'calc(100vh - 121px)';
+
+        getJSON().then((data) => {
+          var dropdownHTML = '<div class="accordion mt-3" id="subjectAccordion">';
+          data.forEach((item) => {
+            const subject = item.displayName.replace(/\s/g, "");
+            var topics = "";
+            item.topics.forEach((topic) => {
+              var binary_games = topic.games.toString(2);
+              while (binary_games.length < 4) {
+                binary_games = "0" + binary_games;
+              }
+              if (binary_games[2] == "1") {
+                topics += `<a href="?json=${topic.jsonFile}" class="subject_link link-offset-1 link-light link-underline-opacity-50 link-underline-opacity-100-hover">${topic.displayName}</a>`;
+              }
+            });
+            if (topics != "") {
+              dropdownHTML += `<div class="accordion-item" style="background: none !important; border: none;"><h2 class="accordion-header" id="${subject}"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"data-bs-target="#collapse{subject}" aria-expanded="false" aria-controls="collapse${subject}">${item.displayName}</button></h2><div id="collapse${subject}" class="accordion-collapse collapse" aria-labelledby="${subject}"data-bs-parent="#subjectAccordion"><div class="accordion-body"><ul class="list-group" id="${subject}ListGroup">${topics}</ul></div></div></div>`;
+            }
+          });
+          dropdownHTML += '</div>';
+          document.querySelector(".accordion_content").innerHTML = dropdownHTML;
+        });
+      }
     });
-  }
-});
-
-const jsonFileName = getParameterByName('json');
-if (jsonFileName != null) {
-  let current_subject, current_topic;
-  getJSON().then((data) => {
-    data.forEach((item) => {
-      item.topics.forEach((topic) => {
-        if (topic.jsonFile == jsonFileName) {
-          current_topic = topic.displayName;
-          current_subject = item.displayName;
-          blank(current_topic, current_subject);
-        }
+
+    const jsonFileName = getParameterByName('json');
+    if (jsonFileName != null) {
+      let current_subject, current_topic;
+      getJSON().then((data) => {
+        data.forEach((item) => {
+          item.topics.forEach((topic) => {
+            if (topic.jsonFile == jsonFileName) {
+              current_topic = topic.displayName;
+              current_subject = item.displayName;
+              blank(current_topic, current_subject);
+            }
+          });
+        });
       });
-    });
-  });
-} else {
-  document.querySelector('.no-json').classList.remove('invis');
-  document.querySelector('.yes-json').classList.add('invis');
-}
+    } else {
+      document.querySelector('.no-json').classList.remove('invis');
+      document.querySelector('.yes-json').classList.add('invis');
+    }
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 72d7ff2..b1bd8ec 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Rasper Revision</title>
 
-   <!-- FAVICON -->
+  <!-- FAVICON -->
   <link rel="icon" type="image/png" href="/assets/favicon.png">
 
   <!-- BOOTSTRAP STYLES -->
@@ -26,7 +26,6 @@
   <!-- STYLES -->
   <link href="/style.css" rel="stylesheet">
 
-
 </head>
 
 <body>
@@ -35,9 +34,6 @@
     <div style="margin-left: 50px;margin-top:50px;" class="p-0">
       <a href="/"><img height="90" src="/assets/wide_logo.png"></a>
     </div>
-    <h1 class="welcome_title">
-      Select a subject
-    </h1>
 
     <div style="flex-grow:1;padding:50px;">
       <div class="games home_btn_row invis">
@@ -68,241 +64,228 @@ <h1 class="welcome_title">
 
   <script>
     const games = document.querySelectorAll('.game');
-const game_parent = document.querySelector('.games');
-
-let title = document.querySelector('.welcome_title');
-let topic_chosen = "";
-
-var current_page_num = 1;
-
-// prevents page from becoming stuck loading
-window.addEventListener('popstate', function (event) {
-  if (window.location.pathname === '/') {
-    location.reload();
-  }
-});
-
-async function getJson() {
-  // Matchup, quiz, fill in the blank, equations
-
-  const data = await (await fetch('/subjects.json')).json();
-  var row1, row2, row3;
-
-  row1 = document.createElement('div');
-  row1.classList.add('home_btn_row');
-  row1.style.flexBasis = '100%';
-  document.querySelector('.subjects').appendChild(row1);
-
-  if (data.length > 4) {
-    row2 = document.createElement('div');
-    row2.classList.add('home_btn_row');
-    row2.style.flexBasis = '100%';
-    document.querySelector('.subjects').appendChild(row2);
-  }
-
-  if (data.length > 8) {
-    row3 = document.createElement('div');
-    row3.classList.add('home_btn_row');
-    row3.style.flexBasis = '100%';
-    document.querySelector('.subjects').appendChild(row3);
-  }
-
-  data.forEach(function (subject) {
-    const subject_btn = document.createElement('button');
-    subject_btn.classList.add('home_btn', subject.bg);
-    subject_btn.innerHTML = subject.displayName;
-    subject_btn.addEventListener('click', function () {
-      document.querySelector('.subjects').classList.add('invis');
-      document.querySelector('.welcome_title').innerHTML = "Select a topic";
-      document.querySelector(subject.topicParent).classList.remove('invis');
-    });
-
-    if (subject.index == 4 && (data.length == 5 || data.length == 6 || data.length == 9)) {
-      row2.appendChild(subject_btn);
-    } else if (subject.index == 7 && (data.length == 9 || data.length == 10)) {
-      row3.appendChild(subject_btn);
-    } else if (subject.index == 8 && data.length == 9) {
-      row3.appendChild(subject_btn);
-    } else if (subject.index <= 4) {
-      row1.appendChild(subject_btn);
-    } else if (subject.index <= 8) {
-      row2.appendChild(subject_btn);
-    } else if (subject.index <= 12) {
-      row3.appendChild(subject_btn);
-    }
-
-    if (subject.topics.length > 12) {
-      var page_count = Math.ceil(subject.topics.length / 12);
-      var pages = [];
+    const game_parent = document.querySelector('.games');
 
-      for (let i = 1; i <= page_count; i++) {
-        var rows = [];
+    let topic_chosen = "";
 
-        if (i == page_count) {
-          var p_row1, p_row2, p_row3, modulus = subject.topics.length % 12;
+    var current_page_num = 1;
 
-          p_row1 = document.createElement('div');
-          p_row1.classList.add('home_btn_row');
-          p_row1.style.flexBasis = '100%';
-          rows.push(p_row1);
-
-          if (modulus == 0) modulus = 12;
-
-          if (modulus > 4) {
-            p_row2 = document.createElement('div');
-            p_row2.classList.add('home_btn_row');
-            p_row2.style.flexBasis = '100%';
-            rows.push(p_row2);
-          }
-          if (modulus > 8) {
-            p_row3 = document.createElement('div');
-            p_row3.classList.add('home_btn_row');
-            p_row3.style.flexBasis = '100%';
-            rows.push(p_row3);
-          }
-        } else {
-          var p_row1, p_row2, p_row3;
-
-          p_row1 = document.createElement('div');
-          p_row1.classList.add('home_btn_row');
-          p_row1.style.flexBasis = '100%';
-          rows.push(p_row1);
-
-          p_row2 = document.createElement('div');
-          p_row2.classList.add('home_btn_row');
-          p_row2.style.flexBasis = '100%';
-          rows.push(p_row2);
-
-          p_row3 = document.createElement('div');
-          p_row3.classList.add('home_btn_row');
-          p_row3.style.flexBasis = '100%';
-          rows.push(p_row3);
-        }
-
-        var page = document.createElement('div');
-        page.classList.add('d-inline-flex', 'flex-column', 'h-100', 'w-100', 'mb-5', 'page');
-        page.id = 'page' + i;
-
-        rows.forEach(function (row) { page.appendChild(row); });
-
-        pages.push(page);
+    // prevents page from becoming stuck loading
+    window.addEventListener('popstate', function (event) {
+      if (window.location.pathname === '/') {
+        location.reload();
       }
+    });
 
-      pages.forEach(function (item) {
-        document.querySelector(subject.topicParent).appendChild(item);
-      })
+    async function getJson() {
+      // Matchup, quiz, fill in the blank, equations
 
-    } else {
-      var t_row1, t_row2, t_row3;
+      const data = await (await fetch('/subjects.json')).json();
+      var row1, row2, row3;
 
-      t_row1 = document.createElement('div');
-      t_row1.classList.add('home_btn_row');
-      t_row1.style.flexBasis = '100%';
-      document.querySelector(subject.topicParent).appendChild(t_row1);
+      row1 = document.createElement('div');
+      row1.classList.add('home_btn_row');
+      row1.style.flexBasis = '100%';
+      document.querySelector('.subjects').appendChild(row1);
 
-      if (subject.topics.length > 4) {
-        t_row2 = document.createElement('div');
-        t_row2.classList.add('home_btn_row');
-        t_row2.style.flexBasis = '100%';
-        document.querySelector(subject.topicParent).appendChild(t_row2);
+      if (data.length > 4) {
+        row2 = document.createElement('div');
+        row2.classList.add('home_btn_row');
+        row2.style.flexBasis = '100%';
+        document.querySelector('.subjects').appendChild(row2);
       }
-      if (subject.topics.length > 8) {
-        t_row3 = document.createElement('div');
-        t_row3.classList.add('home_btn_row');
-        t_row1.style.flexBasis = '33.33333%';
-        t_row2.style.flexBasis = '33.33333%';
-        t_row3.style.flexBasis = '33.33333%';
-        document.querySelector(subject.topicParent).appendChild(t_row3);
-      }
-    }
 
-    subject.topics.forEach(function (topic) {
-      const topic_btn = document.createElement('button');
-      topic_btn.classList.add('home_btn', topic.bg);
-      topic_btn.innerHTML = topic.displayName;
+      if (data.length > 8) {
+        row3 = document.createElement('div');
+        row3.classList.add('home_btn_row');
+        row3.style.flexBasis = '100%';
+        document.querySelector('.subjects').appendChild(row3);
+      }
 
-      topic_btn.addEventListener('click', function () {
-        document.querySelector('.welcome_title').innerHTML = "Select an activity";
-        document.querySelector(subject.topicParent).classList.add('invis');
+      data.forEach(function (subject) {
+        const subject_btn = document.createElement('button');
+        subject_btn.classList.add('home_btn', subject.bg);
+        subject_btn.innerHTML = subject.displayName;
+        subject_btn.addEventListener('click', function () {
+          document.querySelector('.subjects').classList.add('invis');
+          document.querySelector(subject.topicParent).classList.remove('invis');
+        });
+
+        if (subject.index == 4 && (data.length == 5 || data.length == 6 || data.length == 9)) {
+          row2.appendChild(subject_btn);
+        } else if (subject.index == 7 && (data.length == 9 || data.length == 10)) {
+          row3.appendChild(subject_btn);
+        } else if (subject.index == 8 && data.length == 9) {
+          row3.appendChild(subject_btn);
+        } else if (subject.index <= 4) {
+          row1.appendChild(subject_btn);
+        } else if (subject.index <= 8) {
+          row2.appendChild(subject_btn);
+        } else if (subject.index <= 12) {
+          row3.appendChild(subject_btn);
+        }
 
-        var binary_games = topic.games.toString(2);
-        document.querySelector('.games').classList.remove('invis');
+        if (subject.topics.length > 12) {
+          var page_count = Math.ceil(subject.topics.length / 12);
+          var pages = [];
+
+          for (let i = 1; i <= page_count; i++) {
+            var rows = [];
+
+            if (i == page_count) {
+              var p_row1, p_row2, p_row3, modulus = subject.topics.length % 12;
+
+              p_row1 = document.createElement('div');
+              p_row1.classList.add('home_btn_row');
+              p_row1.style.flexBasis = '100%';
+              rows.push(p_row1);
+
+              if (modulus == 0) modulus = 12;
+
+              if (modulus > 4) {
+                p_row2 = document.createElement('div');
+                p_row2.classList.add('home_btn_row');
+                p_row2.style.flexBasis = '100%';
+                rows.push(p_row2);
+              }
+              if (modulus > 8) {
+                p_row3 = document.createElement('div');
+                p_row3.classList.add('home_btn_row');
+                p_row3.style.flexBasis = '100%';
+                rows.push(p_row3);
+              }
+            } else {
+              var p_row1, p_row2, p_row3, p_rows = [p_row1, p_row2, p_row3];
+
+              p_rows.forEach((p_row) => {
+                p_row = document.createElement('div');
+                p_row.classList.add('home_btn_row');
+                p_row.style.flexBasis = '100%';
+                rows.push(p_row);
+              });
+            }
+
+            var page = document.createElement('div');
+            page.classList.add('d-inline-flex', 'flex-column', 'h-100', 'w-100', 'mb-5', 'page');
+            page.id = 'page' + i;
+
+            rows.forEach(function (row) { page.appendChild(row); });
+            pages.push(page);
+          }
 
-        while (binary_games.length < 4) binary_games = '0' + binary_games;
+          pages.forEach(function (item) {
+            document.querySelector(subject.topicParent).appendChild(item);
+          })
 
-        if (binary_games[0] == '1') {
-          document.querySelector('.game-matchup').classList.remove('invis');
-        }
-        if (binary_games[1] == '1') {
-          document.querySelector('.game-quiz').classList.remove('invis');
-        }
-        if (binary_games[2] == '1') {
-          document.querySelector('.game-blank').classList.remove('invis');
-        }
-        if (binary_games[3] == '1') {
-          document.querySelector('.game-equations').classList.remove('invis');
+        } else {
+          var t_row1, t_row2, t_row3;
+
+          t_row1 = document.createElement('div');
+          t_row1.classList.add('home_btn_row');
+          t_row1.style.flexBasis = '100%';
+          document.querySelector(subject.topicParent).appendChild(t_row1);
+
+          if (subject.topics.length > 4) {
+            t_row2 = document.createElement('div');
+            t_row2.classList.add('home_btn_row');
+            t_row2.style.flexBasis = '100%';
+            document.querySelector(subject.topicParent).appendChild(t_row2);
+          }
+          if (subject.topics.length > 8) {
+            t_row3 = document.createElement('div');
+            t_row3.classList.add('home_btn_row');
+            t_row1.style.flexBasis = '33.33333%';
+            t_row2.style.flexBasis = '33.33333%';
+            t_row3.style.flexBasis = '33.33333%';
+            document.querySelector(subject.topicParent).appendChild(t_row3);
+          }
         }
 
-        topic_chosen = topic.jsonFile;
+        subject.topics.forEach(function (topic) {
+          const topic_btn = document.createElement('button');
+          topic_btn.classList.add('home_btn', topic.bg);
+          topic_btn.innerHTML = topic.displayName;
+
+          topic_btn.addEventListener('click', function () {
+            document.querySelector(subject.topicParent).classList.add('invis');
+
+            var binary_games = topic.games.toString(2);
+            document.querySelector('.games').classList.remove('invis');
+
+            while (binary_games.length < 4) binary_games = '0' + binary_games;
+
+            if (binary_games[0] == '1') {
+              document.querySelector('.game-matchup').classList.remove('invis');
+            }
+            if (binary_games[1] == '1') {
+              document.querySelector('.game-quiz').classList.remove('invis');
+            }
+            if (binary_games[2] == '1') {
+              document.querySelector('.game-blank').classList.remove('invis');
+            }
+            if (binary_games[3] == '1') {
+              document.querySelector('.game-equations').classList.remove('invis');
+            }
+
+            topic_chosen = topic.jsonFile;
+          });
+
+          if (subject.topics.length <= 12) {
+            if (topic.index == 4 && (subject.topics.length == 5 || subject.topics.length == 6 || subject.topics.length == 9)) {
+              t_row2.appendChild(topic_btn);
+            } else if (topic.index == 7 && (subject.topics.length == 9 || subject.topics.length == 10)) {
+              t_row3.appendChild(topic_btn);
+            } else if (topic.index == 8 && subject.topics.length == 9) {
+              t_row3.appendChild(topic_btn);
+            } else if (topic.index <= 4) {
+              t_row1.appendChild(topic_btn);
+            } else if (topic.index <= 8) {
+              t_row2.appendChild(topic_btn);
+            } else if (topic.index <= 12) {
+              t_row3.appendChild(topic_btn);
+            }
+          } else {
+            if (topic.index % 12 == 0) {
+              pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
+            } else if (topic.index % 12 == 4 && (subject.topics.length % 12 == 5 || subject.topics.length % 12 == 6 || subject.topics.length % 12 == 9)) {
+              pages[Math.ceil(topic.index / 12) - 1].children[1].appendChild(topic_btn);
+            } else if (topic.index % 12 == 7 && (subject.topics.length % 12 == 9 || subject.topics.length % 12 == 10)) {
+              pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
+            } else if (topic.index % 12 == 8 && subject.topics.length % 12 == 9) {
+              pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
+            } else if (topic.index % 12 <= 4) {
+              pages[Math.ceil(topic.index / 12) - 1].children[0].appendChild(topic_btn);
+            } else if (topic.index % 12 <= 8) {
+              pages[Math.ceil(topic.index / 12) - 1].children[1].appendChild(topic_btn);
+            } else if (topic.index % 12 < 12 || topic.index % 12 == 0) {
+              pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
+            }
+          }
+        })
       });
+    }
 
-      if (subject.topics.length <= 12) {
-        if (topic.index == 4 && (subject.topics.length == 5 || subject.topics.length == 6 || subject.topics.length == 9)) {
-          t_row2.appendChild(topic_btn);
-        } else if (topic.index == 7 && (subject.topics.length == 9 || subject.topics.length == 10)) {
-          t_row3.appendChild(topic_btn);
-        } else if (topic.index == 8 && subject.topics.length == 9) {
-          t_row3.appendChild(topic_btn);
-        } else if (topic.index <= 4) {
-          t_row1.appendChild(topic_btn);
-        } else if (topic.index <= 8) {
-          t_row2.appendChild(topic_btn);
-        } else if (topic.index <= 12) {
-          t_row3.appendChild(topic_btn);
-        }
-      } else {
-        if (topic.index % 12 == 0) {
-          pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
-        } else if (topic.index % 12 == 4 && (subject.topics.length % 12 == 5 || subject.topics.length % 12 == 6 || subject.topics.length % 12 == 9)) {
-          pages[Math.ceil(topic.index / 12) - 1].children[1].appendChild(topic_btn);
-        } else if (topic.index % 12 == 7 && (subject.topics.length % 12 == 9 || subject.topics.length % 12 == 10)) {
-          pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
-        } else if (topic.index % 12 == 8 && subject.topics.length % 12 == 9) {
-          pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
-        } else if (topic.index % 12 <= 4) {
-          pages[Math.ceil(topic.index / 12) - 1].children[0].appendChild(topic_btn);
-        } else if (topic.index % 12 <= 8) {
-          pages[Math.ceil(topic.index / 12) - 1].children[1].appendChild(topic_btn);
-        } else if (topic.index % 12 < 12 || topic.index % 12 == 0) {
-          pages[Math.ceil(topic.index / 12) - 1].children[2].appendChild(topic_btn);
+    getJson();
+
+    // Adds event listeners to each activity button to start the corresponding game with the corresponding JSON file.
+    games.forEach(function (game) {
+      game.addEventListener('click', function () {
+        game_parent.classList.add('invis');
+
+        if (game.innerHTML == "Matchup") {
+          location.href = '/matchup/?json=' + topic_chosen;
+        } else if (game.innerHTML == "Quiz") {
+          location.href = '/quiz/?json=' + topic_chosen;
+        } else if (game.innerHTML == "Fill in the Blank") {
+          window.location.href = '/fill-in-the-blank?json=' + topic_chosen;
+        } else if (game.innerHTML == "Equations") {
+          window.location.href = '/equations?json=physics_equations.json'
         }
-      }
-    })
-  });
-}
-
-getJson();
-
-// Adds event listeners to each activity button to start the corresponding game with the corresponding JSON file.
-games.forEach(function (game) {
-  game.addEventListener('click', function () {
-    game_parent.classList.add('invis');
-    title.innerHTML = 'Loading...';
-
-    if (game.innerHTML == "Matchup") {
-      location.href = '/matchup/?json=' + topic_chosen;
-    } else if (game.innerHTML == "Quiz") {
-      location.href = '/quiz/?json=' + topic_chosen;
-    } else if (game.innerHTML == "Fill in the Blank") {
-      window.location.href = '/fill-in-the-blank?json=' + topic_chosen;
-    } else if (game.innerHTML == "Equations") {
-      window.location.href = '/equations?json=physics_equations.json'
-    }
-  });
-});
+      });
+    });
 
   </script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file