Multilanguage support, italian version, free schema

.vscode/settings.json

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

assets/css/style.css

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

assets/img/it_flag.svg

@@ -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>

assets/img/uk_flag.svg

@@ -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>

assets/js/main.js

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

assets/js/util.js

@@ -14,4 +14,18 @@ function shuffle(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;
 }

data_en.yaml

@@ -1,14 +1,25 @@
 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:
   - title: 'Who''s the best (and sexiest) president ever:'
     answers:
-      - text: <img class='answers-pic' src='assets/img/p0.jpeg'>
+      - text: <img class='answers-pic' src='../assets/img/p0.jpeg'>
         effect: 2000
-      - text: <img class='answers-pic' src='assets/img/p2.jpeg'>
+      - text: <img class='answers-pic' src='../assets/img/p2.jpeg'>
         effect: -9999
-      - text: <img class='answers-pic' src='assets/img/p3.jpeg'>
+      - text: <img class='answers-pic' src='../assets/img/p3.jpeg'>
         effect: -9999
-      - text: <img class='answers-pic' src='assets/img/p5.jpeg'>
+      - text: <img class='answers-pic' src='../assets/img/p5.jpeg'>
         effect: -9999
   - title: Is Taiwan a country
     answers:

data_it.yaml

@@ -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

game/index.html

@@ -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>

index.html

@@ -2,90 +2,77 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <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>
-    <meta name="description" content="Is your social credit score high enough?">
-    <meta name="author" content="Mattia Mascarello">
+        .container {
+            display: grid;
+            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">
-    <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">
+        .flag {
+            width: 100%;
+            /* Make the flags fill the available space */
+            max-width: 150px;
+            /* Limiting max width for better readability */
+            cursor: pointer;
+        }
+    </style>
 </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 class="container">
+        <img id="enf" class="flag" src="assets/img/it_flag.svg" alt="Italian Flag" onclick="selectLanguage('it')">
+        <img id="itf" class="flag" src="assets/img/uk_flag.svg" alt="English Flag" onclick="selectLanguage('en')">
     </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="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>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>
+
+    <script>
+        function selectLanguage(language) {
+            window.location.href = `game/index.html?lang=${language}`;
+        }
+        let enf = document.getElementById('enf');
+        let itf = document.getElementById('itf');
+        enf.addEventListener("mouseover", function () {
+            enf.style.transform = "scale(2)";
+            enf.style.transition = "transform 0.5s";
+        });
+        enf.addEventListener("mouseout", function () {
+            enf.style.transform = "scale(1)";
+            enf.style.transition = "transform 0.5s";
+        });
+        itf.addEventListener("mouseover", function () {
+            itf.style.transform = "scale(2)";
+            itf.style.transition = "transform 0.5s";
+        });
+        itf.addEventListener("mouseout", function () {
+            itf.style.transform = "scale(1)";
+            itf.style.transition = "transform 0.5s";
+        });
+    </script>
 </body>
+
 </html>

schema.yaml

@@ -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