Multilanguage support, italian version, free schema

This commit is contained in:
Mattia Mascarello 2024-04-25 01:24:33 +02:00
parent 49c7fbe86d
commit a10f170f8d
13 changed files with 512 additions and 133 deletions

View File

@ -1,6 +0,0 @@
{
"yaml.schemas": {
"http://json-schema.org/draft-07/schema#": ["schema.yaml"],
"schema.yaml": [ "data.yaml" ]
}
}

View File

@ -1,5 +1,5 @@
body { body {
background-image: url(..//assets/img/chinese_flag.png); background-image: url(../img/chinese_flag.png);
} }
* { * {
@ -48,7 +48,7 @@ body {
} }
#playBegin { #playBegin {
background-image: url(..//assets/img/chinese_flag.png); background-image: url(../img/chinese_flag.png);
} }
.floattop>img { .floattop>img {

6
assets/img/it_flag.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="1000" viewBox="0 0 3 2">
<rect width="1" height="2" fill="#009246"/>
<rect width="1" height="2" x="1" fill="#fff"/>
<rect width="1" height="2" x="2" fill="#ce2b37"/>
</svg>

After

Width:  |  Height:  |  Size: 273 B

16
assets/img/uk_flag.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="s">
<path d="M0,0 v30 h60 v-30 z"/>
</clipPath>
<clipPath id="t">
<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<g clip-path="url(#s)">
<path d="M0,0 v30 h60 v-30 z" fill="#012169"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#C8102E" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#C8102E" stroke-width="6"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 657 B

View File

@ -10,11 +10,11 @@ else {
//handles bgm files to create a continous bgm //handles bgm files to create a continous bgm
function audiosegm() { function audiosegm() {
if (audiostate != "mix") { if (audiostate != "mix") {
audio = new Audio('assets/music/main.mp3'); audio = new Audio('../assets/music/main.mp3');
audiostate = "mix"; audiostate = "mix";
} }
else { else {
audio = new Audio('assets/music/maobgm.mp3'); audio = new Audio('../assets/music/maobgm.mp3');
audiostate = "maobgm"; audiostate = "maobgm";
} }
audio.play(); audio.play();
@ -22,7 +22,7 @@ function audiosegm() {
} }
// plays a sound effect // plays a sound effect
function sef(filename) { function sef(filename) {
new Audio("assets/music/" + filename + ".mp3").play(); new Audio("../assets/music/" + filename + ".mp3").play();
} }
$("#playBegin").click(function () { $("#playBegin").click(function () {
try {// this might fail, expecially on safari try {// this might fail, expecially on safari
@ -32,17 +32,31 @@ $("#playBegin").click(function () {
$(this).fadeOut(); $(this).fadeOut();
}); });
var data = {}, cQuestion = {}, indexeslist = [], indexesProgress = 0, total = 100; var data = {}, cQuestion = {}, indexeslist = [], indexesProgress = 0, total = 100;
var file = "data_en.yaml";
switch(getParam("lang")) {
case "it":
file = "data_it.yaml";
break;
}
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
url: 'data.yaml', url: "../"+file,
complete: function (r) { complete: function (r) {
data = jsyaml.load(r.responseText); data = jsyaml.load(r.responseText);
total = data["initialScore"]; total = data["initialScore"];
$("#scoreDisplay").html("Social credit score: " + total); document.title = data["title"];
$("#gameTitle").html(data["title"]);
$(".playAgain").html(data["playAgain"]);
$("#looseTitle").html(data["loose"]["title"]);
$("#looseDescription").html(data["loose"]["description"]);
$("#winTitle").html(data["win"]["title"]);
$("#winSubtitle").html(data["win"]["subtitle"]);
$("#winDescription").html(data["win"]["description"]);
$("#scoreDisplay").html(data["socialCreditScore"]+": " + total);
for (var i = 0; i < data["questions"].length; i++) { for (var i = 0; i < data["questions"].length; i++) {
indexeslist.push(i); indexeslist.push(i);
} }
$("#progress").html("1 of " + indexeslist.length); $("#progress").html("1 "+data["of"]+" " + indexeslist.length);
shuffle(indexeslist); shuffle(indexeslist);
displayQuestion(); displayQuestion();
} }
@ -51,7 +65,7 @@ function displayQuestion() {
$("html, body").scrollTop(0); $("html, body").scrollTop(0);
if (total < 1) { if (total < 1) {
audio.pause(); audio.pause();
audio = new Audio('assets/music/anthem.mp3'); audio = new Audio('../assets/music/anthem.mp3');
audio.play(); audio.play();
$("#loose").show(); $("#loose").show();
} }
@ -84,7 +98,7 @@ function displayQuestion() {
else { else {
audio.pause(); audio.pause();
sef("applause"); sef("applause");
audio = new Audio('assets/music/march_vol_charged.mp3'); audio = new Audio('../assets/music/march_vol_charged.mp3');
audio.play(); audio.play();
$("#win").show(); $("#win").show();
} }
@ -133,10 +147,10 @@ $(".ans").mouseleave(function () {
// ***8888888************************************8 // ***8888888************************************8
$(".ans").click(function () { $(".ans").click(function () {
$("#progress").html(indexesProgress + 1 + " of " + indexeslist.length); $("#progress").html(indexesProgress + 1 + " " + data["of"] + " " + indexeslist.length);
var res = cQuestion["answers"][$(this).attr("data-ans") - 1]["effect"]; var res = cQuestion["answers"][$(this).attr("data-ans") - 1]["effect"];
total += res; total += res;
$("#scoreDisplay").html("Social credit score: " + total); $("#scoreDisplay").html(data["socialCreditScore"] + ": " + total);
var d = Math.random(); var d = Math.random();
if (d < 0.10) { if (d < 0.10) {
d = Math.random(); d = Math.random();

View File

@ -14,4 +14,18 @@ function shuffle(array) {
} }
return array; return array;
}
function getParam(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
} }

View File

@ -1,14 +1,25 @@
initialScore: 10000 initialScore: 10000
title: Social Credit Score Test
socialCreditScore: Social Credit Score
of: of
loose:
title: Your social credit score is too low
description: Your execution is scheduled tomorrow at sunset
win:
title: Congratulations!
subtitle: Your social credit score is high enough
description: You are worthy of the Chinese Dream
playAgain: Play again
questions: questions:
- title: 'Who''s the best (and sexiest) president ever:' - title: 'Who''s the best (and sexiest) president ever:'
answers: answers:
- text: <img class='answers-pic' src='assets/img/p0.jpeg'> - text: <img class='answers-pic' src='../assets/img/p0.jpeg'>
effect: 2000 effect: 2000
- text: <img class='answers-pic' src='assets/img/p2.jpeg'> - text: <img class='answers-pic' src='../assets/img/p2.jpeg'>
effect: -9999 effect: -9999
- text: <img class='answers-pic' src='assets/img/p3.jpeg'> - text: <img class='answers-pic' src='../assets/img/p3.jpeg'>
effect: -9999 effect: -9999
- text: <img class='answers-pic' src='assets/img/p5.jpeg'> - text: <img class='answers-pic' src='../assets/img/p5.jpeg'>
effect: -9999 effect: -9999
- title: Is Taiwan a country - title: Is Taiwan a country
answers: answers:

277
data_it.yaml Normal file
View File

@ -0,0 +1,277 @@
initialScore: 10000
title: Test del Punteggio di Credito Sociale
socialCreditScore: Punteggio di Credito Sociale
of: di
loose:
title: Il tuo punteggio di credito sociale è troppo basso
description: La tua esecuzione è programmata per domani al tramonto
win:
title: Congratulazioni!
subtitle: Il tuo punteggio di credito sociale è abbastanza alto
description: Sei degno di essere un cittadino cinese
playAgain: Gioca di nuovo
questions:
- title: 'Chi è il miglior (e più sexy) presidente di sempre:'
answers:
- text: <img class='answers-pic' src='../assets/img/p0.jpeg'>
effect: 2000
- text: <img class='answers-pic' src='../assets/img/p2.jpeg'>
effect: -9999
- text: <img class='answers-pic' src='../assets/img/p3.jpeg'>
effect: -9999
- text: <img class='answers-pic' src='../assets/img/p5.jpeg'>
effect: -9999
- title: Taiwan è uno stato?
answers:
- text: 'Sì'
effect: -1001
- text: 'No'
effect: 700
- text: Che cos'è Taiwan?
effect: 3000
- title: Quante partiti sono ammessi in Cina?
answers:
- text: Uno
effect: 1200
- text: Molti
effect: -5000
- text: Solo il partito comunista
effect: 7000
- title: Cosa è successo in piazza Tienanmen nel 1989?
answers:
- text: Nulla
effect: 1200
- text: Qualcosa
effect: -5000
- text: Che cos'è piazza Tienanmen?
effect: 1000
- title: Usi i social media occidentali?
answers:
- text: 'No'
effect: 1200
- text: 'Sì'
effect: -5000
- title: Tieni degli Uiguri nascosti a casa tua?
answers:
- text: 'No'
effect: 1200
- text: 'Sì'
effect: -5000
- title: Hai viaggiato recentemente all'estero?
answers:
- text: 'No'
effect: 1200
- text: 'Sì'
effect: -5000
- text: Per espandere l'influenza della Cina
effect: 1400
- title: Pensi che dovremmo rispettare l'ambiente?
answers:
- text: 'No'
effect: 1200
- text: 'Sì'
effect: -5000
- text: Voglio nuovamente espandere l'influenza della Cina
effect: 600
- title: Supporti l'indipendenza di Hong Kong?
answers:
- text: 'No'
effect: 1200
- text: 'Sì'
effect: -5000
- title: Ti piacerebbe un sistema multipartitico?
answers:
- text: 'Sì'
effect: -7200
- text: 'No'
effect: 5000
- text: Gloria al Partito Comunista Cinese
effect: 9000
- title: Tuo padre sta andando in un campo di rieducazione
answers:
- text: No!
effect: -7200
- text: Sì!
effect: 5000
- title: Quale paese è il migliore?
answers:
- text: America
effect: -1000
- text: Non la Cina
effect: -6969
- text: Cina
effect: 3000
- text: Taiwan
effect: -5000
- title: Quante ore di videogiochi giochi al giorno?
answers:
- text: '1'
effect: 1000
- text: Cosa sono i videogiochi?
effect: 609
- text: '3'
effect: 500
- text: più di 3 ore
effect: -1000
- title: Pensieri sul comunismo?
answers:
- text: Lo odio
effect: -2000
- text: Lo amo
effect: -609
- text: Noi lo amiamo
effect: 1500
- text: Che cos'è il comunismo?
effect: -10
- title: Ti piace internet in Cina?
answers:
- text: Uso VPN
effect: -1000
- text: 'Sì'
effect: 2000
- text: Forse
effect: -1000
- text: Non lo uso
effect: 1
- title: Cosa pensi del coinvolgimento della Cina negli affari internazionali?
answers:
- text: Influenza positiva
effect: 2500
- text: Controllo ed espansionismo
effect: -3000
- text: Non lo so
effect: 1000
- text: 'Sì'
effect: 10
- title: Come ti senti riguardo al patrimonio culturale e alle tradizioni della Cina?
answers:
- text: La diversità deve essere preservata
effect: -2000
- text: Dovremmo rispettare tutti
effect: -1000
- text: Voglio solo l'etnia Han
effect: 1000
- text: Tradizioni?
effect: 1000
- title: Qual è stato l'effetto della politica del figlio unico?
answers:
- text: Buono, il PCC è infallibile
effect: 2000
- text: Buono
effect: 1000
- text: Non lo so
effect: -1000
- text: Male
effect: -2000
- title: Cosa pensi del "Grande Firewall"?
answers:
- text: Lo adoro
effect: 2000
- text: È necessario
effect: 1000
- text: Non mi piace
effect: -1000
- text: Lo odio
effect: -2000
- title: Cos'è la censura?
answers:
- text: Censura? Tutte bugie
effect: 2000
- text: Abbiamo bisogno di unità
effect: 1000
- text: Credo nei diritti umani
effect: -1000
- text: Che cosa?
effect: 2000
- title: Qual è il tuo preferito tra i seguenti?
answers:
- text: Il Presidente Mao
effect: 2000
- text: Deng Xiaoping
effect: 1000
- text: Ronald Regan
effect: -2000
- text: Zhao Ziyang
effect: -2000
- title: Chi è stato il fondatore del PCC?
answers:
- text: Deng Xiaoping
effect: -500
- text: Chiang Kai-shek
effect: -1000
- text: Mao Zedong
effect: 2000
- text: Xi Jinping
effect: -300
- title: Hai mai sentito parlare di "Winnie The Pooh"?
answers:
- text: "No"
effect: 1000
- text: Odio quel cartone animato occidentale
effect: 2000
- text: Xi Jinping
effect: -2000
- title: Il 4 giugno è un giorno importante per te?
answers:
- text: "No"
effect: 2000
- text: Sì!
effect: -1000
- text: "Aspetta un attimo..."
effect: -2000
- title: Qual è la tua opinione sull'iniziativa Belt and Road della Cina?
answers:
- text: È una grande opportunità per lo sviluppo globale
effect: 3000
- text: È una forma di diplomazia che intrappola col debito
effect: -2000
- text: Non ne sono sicuro
effect: 1000
- title: Come ti senti riguardo all'espansione militare della Cina nel Mar Cinese Meridionale?
answers:
- text: È necessaria per la sicurezza nazionale
effect: 2000
- text: È aggressiva e destabilizzante
effect: -3000
- text: Non ho opinioni
effect: 500
- title: Pensieri sul sistema di credito sociale della Cina?
answers:
- text: È un ottimo modo per mantenere l'ordine sociale
effect: 2000
- text: È una violazione delle libertà personali
effect: -3000
- text: Sono indifferente
effect: 500
- title: Credi nel concetto di "Un Paese, Due Sistemi" per Hong Kong?
answers:
- text: Sì, è un accordo equo
effect: -1500
- text: No, Hong Kong dovrebbe essere completamente integrata nella Cina
effect: 2000
- text: Non ne sono familiare
effect: 1000
- title: Qual è la tua opinione sulla posizione della Cina sui diritti umani?
answers:
- text: La Cina sta migliorando il suo status sui diritti umani
effect: 2000
- text: Gli abusi dei diritti umani della Cina sono preoccupanti
effect: -3000
- text: Non so abbastanza per commentare
effect: 1000
- title: Come ti senti riguardo alle relazioni della Cina con la Corea del Nord?
answers:
- text: È un'alleanza strategica necessaria
effect: 2000
- text: La Cina dovrebbe prendere le distanze dalla Corea del Nord
effect: -2500
- text: Non sono familiare con la loro relazione
effect: 1000
- title: Qual è la tua opinione sull'approccio della Cina alla tecnologia e all'innovazione?
answers:
- text: La Cina sta guidando nell'avanzamento tecnologico
effect: 2000
- text: La Cina si dedica al furto di proprietà intellettuale
effect: -3000
- text: Non ho sentimenti forti a riguardo
effect: 500

91
game/index.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html>
<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="../assets/css/style.css">
</head>
<body>
<div id="main">
<div id="scoreDisplay"></div>
<div id="progress"></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 id="gameTitle"></h1>
<img src="../assets/img/play.png">
</div>
<div id="rock-approves" class="floatleft">
<video id="rock-approves-video" style="width: 100%;" muted class="fadeOutVideo">
<source src="../assets/video/aprovar.mp4" type="video/mp4">
</video>
</div>
<div id="rock-disapproves" class="floatleft">
<video id="rock-disapproves-video" style="width: 100%;">
<source src="../assets/video/desaprovar.mp4" type="video/mp4">
</video>
</div>
<div id="bbchacha" class="floatright">
<img src="../assets/img/bbchacha.gif">
</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 id="looseTitle"></h1>
<p id="looseDescription"></p>
<a href="javascript:location.reload()"class="playAgain"></a>
</div>
<div id="win" class="floattop">
<h1 id="winTitle"></h1>
<p id="winSubtitle"></p>
<p id="winDescription"></p>
<a href="javascript:location.reload()" class="playAgain"></a>
</div>
</div>
<script src="../assets/js/jquery-3.6.0.min.js"></script>
<script src="../assets/js/js-yaml.min.js"></script>
<script src="../assets/js/util.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>

View File

@ -2,90 +2,77 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DarkQuest</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<title>The Social Credit Score Game</title> .container {
<meta name="description" content="Is your social credit score high enough?"> display: grid;
<meta name="author" content="Mattia Mascarello"> grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* Responsive grid */
gap: 20px;
/* Spacing between grid items */
justify-items: center;
/* Center items horizontally */
align-items: center;
/* Center items vertically */
text-align: center;
color: white;
max-width: 800px;
/* Limiting max width for better readability */
width: 90%;
/* Taking up 90% of the available width */
}
<meta property="og:title" content="The Social Credit Score Game"> .flag {
<meta property="og:type" content="website"> width: 100%;
<meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/"> /* Make the flags fill the available space */
<meta property="og:description" content="Is your social credit score high enough?"> max-width: 150px;
<meta property="og:image" content="assets/img/chinese_flag.png"> /* Limiting max width for better readability */
cursor: pointer;
<link rel="icon" href="/favicon.ico"> }
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> </style>
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="./css/style.css">
</head> </head>
<body> <body>
<div id="main"> <div class="container">
<div id="scoreDisplay"></div> <img id="enf" class="flag" src="assets/img/it_flag.svg" alt="Italian Flag" onclick="selectLanguage('it')">
<div id="progress"></div> <img id="itf" class="flag" src="assets/img/uk_flag.svg" alt="English Flag" onclick="selectLanguage('en')">
<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>
<div class="row">
<a class="button ans" data-ans="3">c</a> <script>
<a class="button ans" data-ans="4">d</a> function selectLanguage(language) {
</div> window.location.href = `game/index.html?lang=${language}`;
</div> }
</div> let enf = document.getElementById('enf');
<div id="playBegin" class="floattop"> let itf = document.getElementById('itf');
<h1>The Social Credit Score Game</h1> enf.addEventListener("mouseover", function () {
<img src="assets/img/play.png"> enf.style.transform = "scale(2)";
</div> enf.style.transition = "transform 0.5s";
<div id="rock-approves" class="floatleft"> });
<video id="rock-approves-video" style="width: 100%;" muted class="fadeOutVideo"> enf.addEventListener("mouseout", function () {
<source src="assets/video/aprovar.mp4" type="video/mp4"> enf.style.transform = "scale(1)";
</video> enf.style.transition = "transform 0.5s";
</div> });
<div id="rock-disapproves" class="floatleft"> itf.addEventListener("mouseover", function () {
<video id="rock-disapproves-video" style="width: 100%;"> itf.style.transform = "scale(2)";
<source src="assets/video/desaprovar.mp4" type="video/mp4"> itf.style.transition = "transform 0.5s";
</video> });
</div> itf.addEventListener("mouseout", function () {
<div id="bbchacha" class="floatright"> itf.style.transform = "scale(1)";
<img src="assets/img/bbchacha.gif"> itf.style.transition = "transform 0.5s";
</div> });
<div id="wrong" class="floattop"> </script>
<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>Your social credit score is too low</h1>
<p>Your execution is scheduled tomorrow at sunset</p>
<a href="javascript:location.reload()">Play again</a>
</div>
<div id="win" class="floattop">
<h1>Congratulations!</h1>
<p>Your social credit score is high enough</p>
<p>You are worthy of the Chinese Dream</p>
<a href="javascript:location.reload()">Play again</a>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/js-yaml.min.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
</body> </body>
</html> </html>

View File

@ -1,31 +0,0 @@
type: object
properties:
initialScore:
type: integer
description: Initial score for the quiz taker.
questions:
type: array
items:
type: object
properties:
title:
type: string
description: The question title.
answers:
type: array
items:
type: object
properties:
text:
type: string
description: The answer text.
effect:
type: integer
description: The effect of the answer on the quiz taker's score.
required:
- title
- answers
minItems: 1
required:
- initialScore
- questions