First Commit

css/style.css

@@ -0,0 +1,92 @@
+body {
+    background-image: url(..//assets/img/chinese_flag.png);
+}
+
+* {
+    font-family: Helvetica, Arial, sans-serif;
+    color: white;
+}
+
+.button {
+    color: inherit;
+    text-decoration: none;
+    border-radius: 3px;
+    margin-left: 5vw;
+    margin-right: 5vw;
+    margin-top: 20vh;
+    margin-bottom: 1vh;
+    display: inline-block;
+    height: 10vh;
+    width: 30vh;
+    padding: 10px;
+    font-size: 30px;
+}
+
+#question {
+    text-align: center;
+}
+
+#questionTitle {
+    margin-top: 5vh;
+}
+
+.floattop {
+    text-align: center;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+}
+
+#playBegin {
+    background-image: url(..//assets/img/chinese_flag.png);
+}
+
+.floattop>img {
+    width: 35vw;
+    margin-top: 10vh;
+}
+
+#counter {
+    font-size: 25px;
+}
+
+#wrong {
+    background-color: black;
+    display: none;
+}
+
+#correct {
+    background-color: black;
+    display: none;
+}
+
+#mao {
+    background-color: black;
+    display: none;
+    z-index: 4;
+}
+
+#xi {
+    background-color: black;
+    display: none;
+    z-index: 3;
+}
+
+#square {
+    background-color: black;
+    display: none;
+    z-index: 2;
+}
+
+#mao>img, #xi>img, #square>img {
+    width: 30vw;
+    margin-top: 10vh;
+}
+
+#loose {
+    background-color: black;
+    display: none;
+    z-index: 10;
+}

data.json

@@ -0,0 +1,172 @@
+{
+    "initialScore": 10000,
+    "questions": [
+        {
+            "title": "Is Taiwan a country",
+            "answers": [
+                {
+                    "text": "Yes",
+                    "effect": -1001
+                },
+                {
+                    "text": "No",
+                    "effect": 700
+                },
+                {
+                    "text": "What is Taiwan?",
+                    "effect": 3000
+                }
+            ]
+        },
+        {
+            "title": "How many parties are allowed in China?",
+            "answers": [
+                {
+                    "text": "One",
+                    "effect": 1200
+                },
+                {
+                    "text": "Many",
+                    "effect": -5000
+                },
+                {
+                    "text": "Only the Communist party",
+                    "effect": 7000
+                }
+            ]
+        },
+        {
+            "title": "How many children do you have?",
+            "answers": [
+                {
+                    "text": "One",
+                    "effect": 1200
+                },
+                {
+                    "text": "Many",
+                    "effect": -5000
+                },
+                {
+                    "text": "None",
+                    "effect": 10
+                }
+            ]
+        },
+        {
+            "title": "What happened in Tienanmen square in 1989?",
+            "answers": [
+                {
+                    "text": "Nothing",
+                    "effect": 1200
+                },
+                {
+                    "text": "Something",
+                    "effect": -5000
+                },
+                {
+                    "text": "What?",
+                    "effect": 10
+                }
+            ]
+        },
+        {
+            "title": "Do you use western socia media?",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": 1200
+                },
+                {
+                    "text": "Yes",
+                    "effect": -5000
+                }
+            ]
+        },
+        {
+            "title": "Do you keep any Uyghurs hidden at home?",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": 1200
+                },
+                {
+                    "text": "Yes",
+                    "effect": -5000
+                }
+            ]
+        },
+        {
+            "title": "Have you recently travelled abroad",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": 1200
+                },
+                {
+                    "text": "Yes",
+                    "effect": -5000
+                },
+                {
+                    "text": "To expand China's influence",
+                    "effect": 400
+                }
+            ]
+        },
+        {
+            "title": "Do you think we should respect the environment",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": 1200
+                },
+                {
+                    "text": "Yes",
+                    "effect": -5000
+                },
+                {
+                    "text": "Just casually expanding China's influence again",
+                    "effect": 600
+                }
+            ]
+        },
+        {
+            "title": "Do you support Hong-Kong's indipendence?",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": 1200
+                },
+                {
+                    "text": "Yes",
+                    "effect": -5000
+                }
+            ]
+        },
+        {
+            "title": "Can we build a nuclear power plant near your home?",
+            "answers": [
+                {
+                    "text": "No",
+                    "effect": -7200
+                },
+                {
+                    "text": "Yes",
+                    "effect": 5000
+                }
+            ]
+        },
+        {
+            "title": "Your father is going to a re-education camp",
+            "answers": [
+                {
+                    "text": "No!",
+                    "effect": -7200
+                },
+                {
+                    "text": "Yes!",
+                    "effect": 5000
+                }
+            ]
+        }
+    ]
+}

index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>The Social Credit Score Game</title>
+    <meta name="description" content="Is your social credit score high enough?">
+    <meta name="author" content="Mattia Mascarello">
+
+    <meta property="og:title" content="The Social Credit Score Game">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
+    <meta property="og:description" content="Is your social credit score high enough?">
+    <meta property="og:image" content="assets/img/chinese_flag.png">
+
+    <link rel="icon" href="/favicon.ico">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+    <div id="main">
+        <div id="counter"></div>
+        <div id="question">
+            <h1 id="questionTitle">Question</h1>
+            <div class="grid">
+                <div class="row">
+                    <a class="button ans" data-ans="1">a</a>
+                    <a class="button ans" data-ans="2">b</a>
+                </div>
+                <div class="row">
+                    <a class="button ans" data-ans="3">c</a>
+                    <a class="button ans" data-ans="4">d</a>
+                </div>
+            </div>
+        </div>
+        <div id="playBegin" class="floattop">
+            <h1>The Social Credit Score Game</h1>
+            <img src="assets/img/play.png">
+        </div>
+        <div id="wrong" class="floattop">
+            <img src="assets/img/wrong.png">
+        </div>
+        <div id="correct" class="floattop">
+            <img src="assets/img/correct.png">
+        </div>
+        <div id="mao" class="floattop">
+            <img src="assets/img/mao.jpg">
+        </div>
+        <div id="xi" class="floattop">
+            <img src="assets/img/xi.jpg">
+        </div>
+        <div id="square" class="floattop">
+            <img src="assets/img/square.jpg">
+        </div>
+        <div id="loose" class="floattop">
+            <h1>You lost</h1>
+            <p>Your execution is scheduled tomorrow at sunset</p>
+            <i>Thanks for playing</i><br />
+            <a href="javascript:location.reload()">Play again</a>
+        </div>
+    </div>
+</body>
+
+<script src="js/jquery-3.6.0.min.js"></script>
+<script src="js/util.js"></script>
+<script src="js/main.js"></script>
+
+</html>

js/main.js

@@ -0,0 +1,107 @@
+var audio, audiostate;
+var d = Math.random();
+if (d < 0.50) {
+    audiostate = "mix";
+}
+else {
+    audiostate = "maobgm";
+}
+function audiosegm() {
+    if (audiostate != "mix") {
+        audio = new Audio('assets/music/main.mp3');
+        audiostate = "mix";
+    }
+    else {
+        audio = new Audio('assets/music/maobgm.mp3');
+        audiostate = "maobgm";
+    }
+    audio.play();
+    audio.onended = audiosegm;
+}
+function sef(filename) {
+    new Audio("assets/music/" + filename + ".mp3").play();
+}
+$("#playBegin").click(function () {
+    document.getElementsByTagName("html")[0].requestFullscreen();
+    audiosegm();
+    $(this).fadeOut();
+});
+var data = {}, cQuestion = {}, indexeslist = [], indexesProgress = 0, total = 100;
+$.getJSON("data.json", function (d) {
+    data = d;
+    total = d["initialScore"];
+    $("#counter").html("Social credit score: " + total);
+    for (var i = 0; i < d["questions"].length; i++) {
+        indexeslist.push(i);
+    }
+    shuffle(indexeslist);
+    displayQuestion();
+});
+function displayQuestion() {
+    $("html, body").scrollTop(0);
+    if (total < 1) {
+        audio.pause();
+        audio = new Audio('assets/music/anthem.mp3');
+        audio.play();
+        $("#loose").show();
+    }
+    else {
+        var index = 0;
+        if (indexesProgress < indexeslist.length) {
+            index = indexeslist[indexesProgress];
+            indexesProgress++;
+        }
+        else {
+            shuffle(indexeslist);
+            indexesProgress = 0;
+            index = 0;
+        }
+        cQuestion = data["questions"][index];
+        $("[data-ans=1]").html(data["questions"][index]["answers"][0]["text"]);
+        $("[data-ans=2]").html(data["questions"][index]["answers"][1]["text"]);
+        if (data["questions"][index]["answers"][2]) $("[data-ans=3]").html(data["questions"][index]["answers"][2]["text"]);
+        else $("[data-ans=3]").html("");
+        if (data["questions"][index]["answers"][3]) $("[data-ans=4]").html(data["questions"][index]["answers"][3]["text"]);
+        else $("[data-ans=4]").html("");
+        $("#questionTitle").html(data["questions"][index]["title"]);
+    }
+}
+$(".ans").click(function () {
+    var res = cQuestion["answers"][$(this).attr("data-ans") - 1]["effect"];
+    total += res;
+    $("#counter").html("Social credit score: " + total);
+    var d = Math.random();
+    if (d < 0.10) {
+        d = Math.random();
+        if (d < 0.30) {
+            $("#mao").fadeIn();
+            $("#mao").fadeOut();
+            sef("mao");
+        }
+        else if (d < 0.60) {
+            $("#xi").fadeIn();
+            $("#xi").fadeOut();
+        }
+        else {
+            $("#square").fadeIn();
+            $("#square").fadeOut();
+        }
+    }
+    if (res < 0) {
+        $("#wrong").fadeIn();
+        sef("wrong");
+        if (res < -1000) {
+            sef("boo");
+        }
+        $("#wrong").fadeOut();
+    }
+    else {
+        sef("correct");
+        $("#correct").fadeIn();
+        if (res > 1000) {
+            sef("applause");
+        }
+    }
+    displayQuestion();
+    $("#correct").fadeOut();
+});

js/util.js

@@ -0,0 +1,17 @@
+function shuffle(array) {
+  let currentIndex = array.length,  randomIndex;
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex], array[currentIndex]];
+  }
+
+  return array;
+}