JILpublic
/
digsgov-geburt
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Neues Layout

This commit is contained in:
Peper, Niklas 2022-12-07 12:26:02 +01:00
parent 18214f6c72
commit 3af25f1b0f
5 changed files with 106 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
index.html
View File

@ -15,28 +15,50 @@
<body onload="titleScreen()">
<header>
<!-- <header>
<div class="top">
<div class="content">
<div class="left">
<span id="cityName">Projekt DigSGov</span>
</div>
<div class="right">
<span class="noMobile">Nils Gründler</span>
<span class="seperator noMobile"></span>
<span class="noMobile">Kerim Hasic</span>
<span class="seperator noMobile"></span>
<span class="noMobile">Mathis Hay</span>
<span class="seperator noMobile"></span>
<span class="noMobile">Ove Brent Klasen</span>
<span class="seperator noMobile"></span>
<span class="noMobile">Aaron Lüersen</span>
</div>
</div>
</div>
</header>
</header> -->
<main>
<div class="content">
<ol id="location">
<!-- <ol id="location">
<li>Medieninformatik</li>
<li>/</li>
<li>Bachelor-Projekt</li>
<li>/</li>
<li>Förderung von digitaler Souveränität mittels Gamification oder Serious Games</li>
</ol>
</ol> -->
<div id="contentWrapper" class="moreContent">
<h1>Datenaustausch von Behörden</h1>
<!-- <h1>Datenaustausch von Behörden</h1> -->
<div id="gameContainer">
<div id='gameSpace'>
<div id="layer2" class="background" draggable="false"></div>
<div id="layer1" class="background" draggable="false"></div>
<map name="map" id="map"></map>
<div id="overLayer">
<img id="mapImage" usemap="#map" src="images/independent/alpha.png">
</div>
<div id="layer3" class="foreground" draggable="false"></div>
</div>
</div>
<div id="introduction">
<h2>Einführung in das Szenario</h2>
<!-- <h2>Einführung in das Szenario</h2>
Stellen Sie sich vor, dass Sie gerade ein Kind bekommen haben. Im Krankenhaus haben Sie dabei einige Daten angegeben.
Nach wenigen Tagen erhalten Sie einen Brief vom Bundeszentralamt für Steuern, welcher die Steueridentifikationsnummer Ihres neugeborenen Kindes enthält.
<br>
@ -51,21 +73,10 @@
<br>
Für das optimale Spielerlebnis werden eine Maus und aktivierter Ton empfohlen.
Zudem gibt es derzeit Probleme auf iOS.
<br>
<h4>Klicken Sie auf das folgende Bild, um das Spiel zu starten.</h4>
<br> -->
<h4 id="start-game-info">Klicken Sie auf das Bild, um das Spiel zu starten.</h4>
</div>
<div id="gameContainer">
<div id='gameSpace'>
<div id="layer2" class="background" draggable="false"></div>
<div id="layer1" class="background" draggable="false"></div>
<map name="map" id="map"></map>
<div id="overLayer">
<img id="mapImage" usemap="#map" src="images/independent/alpha.png">
</div>
<div id="layer3" class="foreground" draggable="false"></div>
</div>
</div>
<div id="evaluation">
<!-- <div id="evaluation">
<h3>Evaluation</h3>
Wenn Sie das Ende des Spieles erreicht haben, würde uns eine Rückmeldung sehr weiterhelfen!
<br>
@ -76,9 +87,9 @@
<br>
Vielen Dank, dass Sie sich die Zeit genommen haben, dieses Spiel zu spielen!
</div>
</div> -->
</div>
<div id="infoWrapper" class="contentInfo">
<!-- <div id="infoWrapper" class="contentInfo">
<div>
<h2>Von glücklichen Entwicklern empfohlen:</h2>
</div>
@ -95,37 +106,37 @@
<div id="devMenu" onclick="skipToPinboard3()">Pinnwand mit neuem Kniff</div>
<div id="devMenu" onclick="skipToPinboard4()">Den roten Faden nicht verlieren</div>
<div id="devMenu" onclick="skipToPinboard5()">Übersichtlich zur (unvollständigen) endgültigen Übersicht</div>
</div>
</div> -->
</div>
</main>
<footer>
<div class="footer_wrapper">
<div class="footer_content">
<div class="column">
<!-- <div class="column">
<h3>Übersicht</h3>
<ul>
<li onclick="document.getElementById('introduction').scrollIntoView({behavior: 'smooth'})">Szenario</li>
<li onclick="document.getElementById('requirements').scrollIntoView({behavior: 'smooth'})">Anforderungen</li>
<li onclick="document.getElementById('evaluation').scrollIntoView({behavior: 'smooth'})">Evaluation</li>
</ul>
</div>
<div class="column">
<h3>Kontakt</h3>
<ul>
</div> -->
<div>
<!-- <h3>Kontakt</h3> -->
<a href="impressum/impressum.html">
<li>
Impressum / Credits
</li>
</a>
<a href="https://survey.imis.uni-luebeck.de/index.php/247384" target="_blank">
<!-- <a href="https://survey.imis.uni-luebeck.de/index.php/247384" target="_blank">
<li>Feedback</li>
</a>
<a href="https://docs.google.com/document/d/1cyKyrE2PdaP7gWNrgTBv7nlVRBXbC5a1eiGZer6RBUU/edit" target="_blank">
<li>Quellen</li>
</a>
</ul>
</a> -->
</div>
<div class="column right">
<!-- <div class="column right">
<div id="footer_cityName">Projekt DigSGov</div>
<p>
Diese Seite dient nur zur besseren Veranschaulichung der Idee des Projektes.
@ -136,7 +147,7 @@
</div>
</div>
<div class="footer_space"></div>
<div class="footer_border"></div>
<div class="footer_border"></div> -->
</div>
</footer>
<script src="scripts/model/main.js"></script>

42
scripts/model/main.js
View File

@ -1,11 +1,47 @@
function init() {
document.getElementById("start-game-info").classList.add("fadeOutText");
document.getElementById("playButton").remove();
// ANFANG API KRAM
var myHeaders = new Headers();
myHeaders.append("Content-Type",
"application/x-www-form-urlencoded");
var urlencoded = new URLSearchParams();
urlencoded.append("session",
"787-MAX");
urlencoded.append("section",
"Tutorial");
urlencoded.append("prototype",
"SpielGeburt");
urlencoded.append("info",
"FreiesFeld");
urlencoded.append("debug",
"");
var requestOptions = {
method: 'POST', headers: myHeaders, body: urlencoded, redirect: 'follow'
};
fetch("https://link.jil.sh/eval/evaluate.php",
requestOptions).then(response => response.text()).then(result => console.log(result)).catch(error => console.log('error', error));
// ENDE API KRAM
loadBackgroundImages();
initPinboardButton();
// hide pinboard button in beginning
document.getElementById("pinboardButton").style.visibility="hidden";
document.getElementById("pinboardButton").style.visibility = "hidden";
// fullscreen button
initFullscreen();
@ -16,13 +52,13 @@ function init() {
fadeToBlack();
window.setTimeout(initTutorial,1000);
window.setTimeout(initTutorial, 1000);
}
function titleScreen() {
play = document.createElement("div");
play.id = "playButton";
play.onclick = function() {
play.onclick = function () {
init();
}
document.getElementById("gameSpace").appendChild(play);

5
scripts/view/scenes.js
View File

@ -240,6 +240,7 @@ function initScreenMessage(number) {
//initializing scene 1
function initScene1() {
// FETCH SCENE 1
document.getElementById(activeLayer).style.backgroundImage = "url('images/scene1/szene1_zimmer.jpg')";
window.setTimeout(scene1_Dialogue_1.bind(null, drawHitboxesScene1));
}
@ -257,6 +258,7 @@ function initScene1_2() {
//initializing scene 2
function initScene2() {
// FETCH SCENE 2
hideImage("pinHospital_red");
hideImage("pinOffice_red");
hideImage("pinAuthority_red");
@ -293,6 +295,7 @@ function initScene2_2() {
//initializing scene 3
function initScene3() {
// FETCH SCENE 3
printer = 0;
//computer = 0;
letter = 0;
@ -342,6 +345,7 @@ function initScene3_last() {
//initializing scene 4
function initScene4() {
// FETCH SCENE 4
email = 0;
database = 1;
persondataOpen = 0;
@ -382,6 +386,7 @@ function initScene4_2() {
//initializing scene 5
function initScene5() {
// FETCH SCENE 5
hideImage("arrow_grey");
hideImage("arrow_red");
hideImage("pinAuthority_red");

4
styles/main.css
View File

@ -1,5 +1,9 @@
/*"aspect-ratio" requires new browsers (Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74)*/
.fadeOutText {
opacity: 0%;
transition: opacity 1s ease-in-out;
}
#gameSpace {
line-height: normal;
font-family: sans-serif;

17
styles/site.css
View File

@ -3,6 +3,11 @@ body {
font-family: sans-serif;
line-height: 1.5;
font-weight: 400;
background: #dbdcdb;
}
#start-game-info {
color: black;
}
body hr {
@ -96,12 +101,13 @@ main .content {
margin: 0 auto;
max-width: 1200px;
padding: 30px 25px 60px 25px;
overflow: auto;
/* overflow: auto; */
}
main .content .contentInfo, main .content .moreContent {
display: block;
float: left;
margin: auto;
/* float: left; */
}
main .content .contentInfo {
@ -115,14 +121,15 @@ main .content .contentInfo div {
}
main .content .moreContent {
width: 800px;
margin-right: 80px;
/* width: 800px; */
text-align: center;
/* margin-right: 80px; */
}
footer {
overflow: hidden;
margin-top: -25px;
padding-top: 25px;
padding-top: 170px;
position: relative;
}