Release 1.0

Andy-Wu12 · Aug 1, 2022 · 21dc045 · 21dc045
commit 21dc045
Show file tree

Hide file tree

Showing 11 changed files with 397 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# PyCharm
+.idea/
+
+# Mac OSX
+.DS_Store
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2022] [Andy Wu]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,15 @@
+# Chimpanzee Test
+
+[Human Benchmark's](https://humanbenchmark.com/tests/chimp) Chimpanzee Test
+rebuilt from scratch using jQuery.
+
+## Installation
+
+Clone this repository and open the `index.html` file in the resulting folder.
+
+## Acknowledgements
+Favicons generated using 
+[John Sorrentino's](https://twitter.com/johnsorrentino) [favicon.io](https://favicon.io/favicon-generator/)
+
+## License
+[MIT](https://choosealicense.com/licenses/mit/)
diff --git a/assets/favicon-16x16.png b/assets/favicon-16x16.png
diff --git a/assets/favicon-32x32.png b/assets/favicon-32x32.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+
+<html lang="en-US"> 
+  <head>
+	<meta charset="utf-8"/>
+	<meta name="ChimpTest" content="Recreated humanbenchmark.com's chimpanzee test">
+	<meta name="Author" content="Andy Wu">
+	<meta name="Date" content="May 1, 2021">
+
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+
+	<link href="styles/styles.css" rel="stylesheet" />
+	<link href="styles/layout.css" rel="stylesheet" />
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+	<script src="scripts/hide_section.js"> </script>
+	<script src="scripts/mem_test.js"> </script>
+
+	<title> Chimp Test </title>
+  </head>
+
+  <body>
+	<header>
+		<section id="header-text" class="section-txt">
+			<h1> Chimpanzee Test </h1>
+			<h2> By <a href="https://iamandywu.com/"> Andy Wu </a> </h2>
+			<p>
+				Check out some of my other work on
+				<a href="https://github.com/Andy-Wu12"> GitHub </a>
+			</p>
+		</section>
+		<button id="hide-head-button" class="hide-button"> Hide Heading </button>
+        <br/>
+		<hr/>
+	</header>
+	<main>
+		<section id="description-text" class="section-txt">
+			<h2> Test Your Working Memory </h2>
+			<h3> Idea taken from <a href="https://humanbenchmark.com/tests/chimp" target="_blank">
+				Chimpanzee Test </a> and rebuilt from scratch
+			</h3>
+			<p id="game-description"> Click the squares in order according to their numbers.
+                <br/>
+                The test will get progressively harder.
+            </p>
+		</section>
+		<button id="hide-description-button" class="hide-button"> Hide Description </button> <br/>
+		<hr/>
+		<div id="start-button-container" class="section-txt">
+			<button id="start-button"> Start </button>
+		</div>
+		<!--  Game -->
+		<div id="game-board">
+            <!-- Game nodes will be generated inside this div -->
+		</div>
+		<h3 id="game-message" class="section-txt"> Click the button above to start the test </h3>
+		<hr/>
+	</main>
+  </body>
+</html>
diff --git a/scripts/hide_section.js b/scripts/hide_section.js
@@ -0,0 +1,38 @@
+
+let listIsHidden = false;
+let headIsHidden = false;
+
+$(document).ready(function() {
+    let hideHeadButton = $("#hide-head-button");
+    let headContainer = $("#header-text");
+
+    let hideDescButton = $("#hide-description-button");
+    let descriptionContainer = $("#description-text");
+
+    hideHeadButton.click(function() {
+        if(!headIsHidden) {
+            headContainer.hide();
+            hideHeadButton.html("Show Heading");
+            headIsHidden = true;
+        }
+        else {
+            headContainer.show();
+            hideHeadButton.html("Hide Heading");
+            headIsHidden = false;
+        }
+    });
+
+    hideDescButton.click(function() {
+        if(!listIsHidden) {
+            descriptionContainer.hide();
+            hideDescButton.html("Show Description");
+            listIsHidden = true;
+        }
+        else {
+            descriptionContainer.show();
+            hideDescButton.html("Hide Description");
+            listIsHidden = false;
+        }
+    });
+
+});
diff --git a/scripts/mem_test.js b/scripts/mem_test.js
@@ -0,0 +1,142 @@
+
+const numNodes = 25; // Equal to # of levels
+const defaultBoard = [];
+for(let i = 1; i <= numNodes; i++) {
+        defaultBoard.push(i);
+    }
+
+let nodeOrder = [];
+let currentOrder = 0;
+let level = 2;
+let gameOver = false;
+let firstNodeClicked = false;
+
+$(document).ready(function() {
+    let startButton = $("#start-button");
+    let startButtonContainer = $("#start-button-container");
+
+    // Hide "Start" button when pressed
+    startButtonContainer.on("click", "#start-button", function() {
+        startButton.hide();
+        startGame();
+    });
+    /*
+    Handle when a valid node is clicked. Delegate event to gameBoard div since
+    templated elements don't have event handlers.
+    */
+    $('#game-board').on("click", ".node-t", function() {
+        let id = $(this).attr("id");
+        let node = document.getElementById(id);
+        let nodeNum = parseInt(node.id);
+
+        /* Check if number clicked in correct order */
+        if(nodeNum !== nodeOrder[currentOrder]) {
+            endGame(level);
+            startButton.show();
+            gameOver = true;
+        }
+        /* Clicking final node in level with no errors */
+        else if(nodeNum === nodeOrder[nodeOrder.length - 1]) {
+            level = level + 1;
+            firstNodeClicked = false;
+            // End game if max score beat
+            if(level > numNodes) {
+                endGame(level);
+                startButton.show();
+                return;
+            }
+            playLevel(defaultBoard.slice())
+        }
+        /* Clicked in correct order but not last in level */
+        else {
+            /* Hide all node numbers after the first in a level is clicked */
+            if(!firstNodeClicked) {
+                firstNodeClicked = true;
+                hideNodeNumbers(nodeOrder);
+            }
+            nodeOrder.splice(0, 1);
+        }
+        node.className = "node node-f";
+        node.innerText = (0).toString();
+    });
+});
+
+function startGame() {
+    resetAll();
+    let roll = defaultBoard.slice();
+    // Template the blank nodes before starting game loop
+    emptyBoard(defaultBoard);
+    playLevel(roll);
+}
+
+/* Main game loop */
+function playLevel(nodeNums) {
+    let rollCopy = nodeNums.slice();
+    let nextNodeOrder = generateNextLevel(level, rollCopy);
+    nodeOrder = nextNodeOrder;
+    renderLevelBoard(nextNodeOrder);
+}
+
+/* Game helper functions */
+function generateNextLevel(levelNum, nodeNums) {
+    emptyBoard(defaultBoard);
+    let nodesToRender = [];
+    // Randomly determine which nodes will be part of the level
+    for (let i = 0; i < levelNum; i++) {
+        let index = Math.floor(Math.random() * nodeNums.length);
+        nodesToRender.push(nodeNums[index]);
+        // Remove already added nodes from being rolled again
+        nodeNums.splice(index, 1);
+    }
+    return nodesToRender;
+}
+
+function renderLevelBoard(boardNodes) {
+    for(let i = 0; i < boardNodes.length; i++) {
+        let boardNode = document.getElementById(boardNodes[i].toString());
+        boardNode.className = "node node-t";
+        boardNode.innerText = (i+1).toString();
+    }
+}
+
+function emptyBoard(board) {
+    let templateString = "";
+    let gameBoard = document.getElementById("game-board");
+    let gameMessage = document.getElementById("game-message");
+
+    for(let i = 0; i < board.length; i++) {
+        templateString += "<button class=\"node node-f\" id=" + (i+1) + "> 0 </button>";
+    }
+    gameBoard.innerHTML = templateString;
+    gameMessage.innerHTML = "";
+}
+
+function endGame(score) {
+    let gameBoard = document.getElementById("game-board");
+    let gameMessage = document.getElementById("game-message");
+
+    gameBoard.innerHTML = "";
+    if(score > 25) {
+        gameMessage.innerHTML =
+            "<h2> You have reached the maximum score of " + (score-1).toString() + "</h2>";
+    }
+    else {
+        gameMessage.innerHTML =
+            "<h2> Your score is " + (score-1).toString() + ". Try again to beat your score! </h2>";
+    }
+}
+
+function resetAll() {
+    nodeOrder = [];
+    currentOrder = 0;
+    level = 2;
+    gameOver = false;
+    firstNodeClicked = false;
+}
+
+function hideNodeNumbers(nodesOnBoard) {
+    for(let i = 0; i < nodesOnBoard.length; i++) {
+        let node = document.getElementById(nodesOnBoard[i]);
+        node.innerHTML = "";
+    }
+}
diff --git a/styles/layout.css b/styles/layout.css
@@ -0,0 +1,25 @@
+@charset "utf-8";
+
+#game-board {
+    justify-content: center;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 80px 80px 80px 80px 80px;
+    grid-template-rows: 80px 80px 80px 80px 80px;
+}
+
+.node {
+    height: 80px;
+    width: 80px;
+}
+
+.node-t {
+    height: 80px;
+    width: 80px;
+    visibility: visible;
+    font-size: 30pt;
+}
+
+.node-f {
+    visibility: hidden;
+}