Compare commits
No commits in common. "master" and "1.1" have entirely different histories.
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Cracker
|
||||
|
||||
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.
|
||||
104
README.md
104
README.md
@ -1,75 +1,107 @@
|
||||
# Familienduell
|
||||
|
||||
|
||||
|
||||
Familienduell Client / Server (NodeJs Javascript)
|
||||
|
||||
### -A- START DES SERVERS!
|
||||
### START DES SERVERS!
|
||||
|
||||
___Windows___
|
||||
1. Im Ordner "server" die Datei StartServer.bat doppelklicken.
|
||||
* Im Fenster das jetzt erscheint sollte: "SERVER IS UP AND RUNNING" stehen.
|
||||
* Falls die Firewall fragt, solltest du die Anfrage zulassen da sonst der Client nicht verbinden kann.
|
||||
___Windows mit NodeJs___
|
||||
|
||||
___Mac___
|
||||
1.1 Im Ordner "server" die Datei StartServer.bat doppelklicken.
|
||||
|
||||
1. Installiere NodeJs und npm (https://nodejs.org/en/download/)
|
||||
1.2 Im Fenster das jetzt erscheint sollte: "Websocket Server running at ws://127.0.0.1:8080" stehen.
|
||||
|
||||
2. starte die (mac) konsole und wechsle in den Serverordner
|
||||
1.3 Falls die Firewall fragt, solltest du die Anfrage zulassen da sonst der client nicht verbinden kann.
|
||||
|
||||
3. installiere das Websocketmodul (ws)
|
||||
___Linux mit Python___
|
||||
|
||||
1.1 Installiere Pyton3 mit pip und git
|
||||
`sudo apt-get install python3 python3-pip git -y`
|
||||
|
||||
1.2 Installiere Websockets für Python3
|
||||
`pip3 install asyncio websockets`
|
||||
|
||||
1.3 Servercode downloaden
|
||||
`git clone https://github.com/cracker0dks/Familienduell.git`
|
||||
|
||||
1.4 Ins Serververzeichnis wecheseln
|
||||
`cd Familienduell/Server`
|
||||
|
||||
1.5 Starte den Server
|
||||
`python3 server.py`
|
||||
|
||||
1.6 In der Console erscheint: "info>starting server 0.0.0.0:8080"
|
||||
|
||||
___Mac mit NodeJs___
|
||||
|
||||
1.1 Installiere NodeJs und npm (https://nodejs.org/en/download/)
|
||||
|
||||
1.2 starte die (mac) konsole und wechsle in den Serverordner
|
||||
|
||||
1.3 installiere das Websocketmodul (ws)
|
||||
`npm install ws`
|
||||
|
||||
4. Starte den Server
|
||||
1.4 Starte den Server
|
||||
`node server.js`
|
||||
|
||||
5. In der Console erscheint: "SERVER IS UP AND RUNNING"
|
||||
1.5 In der Console erscheint: "Websocket Server running at ws://127.0.0.1:8080"
|
||||
|
||||
### -B- START DES CONTROLLERS!
|
||||
### START DES CONTROLLERS!
|
||||
|
||||
1. Browser öffnen und zur Adresse: http://127.0.0.1:8080 surfen
|
||||
2.1 in den Ordner "web" wechseln und die datei "index.html" mit dem Browser (Chrome) öffnen! (Dieses Programm wurde für Chrome entwickelt und sonst nicht getestet.)
|
||||
|
||||
2. Auf den Controller Button klicken.
|
||||
2.2 Wenn der Browser auf dem gleichen PC läuft wie der Server einfach start klicken, ansonsten die IP-Adresse anpassen.
|
||||
|
||||
### -C- Start des Displays
|
||||
2.3 (Oben links, in der Ecke des Browsers, sollte nun entwas in der Art "Verbunden mit: ws://127.0.0.1:8080" stehen.)
|
||||
|
||||
1. In einem neuen Browserfenster/tab verbinden und auf "Display" klicken.
|
||||
2.4 Auf den Controller Button klicken.
|
||||
|
||||
### Start des Displays
|
||||
|
||||
Alle Schirtte aus "START DES CONTROLLERS!" in einem neuen Browserfenster ausführen. Bei 2.4 auf display klicken.
|
||||
|
||||
|
||||
---------------------------
|
||||
|
||||
### FAQs:
|
||||
Q: Warum ist das Display zu Beginn schwarz, und wie kann ich das ändern?
|
||||
|
||||
A: Das Bild ist schwarz damit man die Intromusik starten kann und die Leute (Zuschauer) nicht schon vorher wissen was auf sie zukommt.
|
||||
Dies kann (Im Controller) über die Checkbox "Blackscreen", im Bereich "Intro" kontrolliert werden.
|
||||
|
||||
Q: Warum bekomm ich die Fehlermeldung "node.exe wurde falsch geschrieben oder konnte nicht gefunden werden"?<br>
|
||||
A: Die heruntergeladene zip Datei muss zunächst entpack werden. Rechtsklick auf die Datei -> Alles etpacken.
|
||||
Q: Ich kann keine Fragen editieren, was ist da los?
|
||||
|
||||
Q: Wie funktioniert das mit 2 oder mehr Geräten?
|
||||
A: Alle Geräte müssen im gleichen Netzwerk sein. Dann verwende einfach eine Externe IP des Servers (aus dem Serverfenster) zum verbinden von einem anderen Gerät aus.
|
||||
A: Diese Anwendung wurde für den Browser Google Chrome entwickelt. Warscheinlich verwendest du Firefox.
|
||||
|
||||
Q: Wie funktioniert das mit 2 Rechnern?
|
||||
|
||||
A: Step by Step:
|
||||
PC1 = controller und Server
|
||||
PC2 = display
|
||||
|
||||
1. PC 1 muss im gleichen Netztwerk (Wlan / LAN) sein wie PC 2.
|
||||
2. Kopiere alle Dateien auf beide PCs
|
||||
3. starte den Server auf PC1
|
||||
4. Starte den controller auf PC1 (So wie sonst auch immer mit IP: 127.0.0.1)
|
||||
5. Nun musst du die LAN IP-Adresse von PC1 herrausfinden. Anleitung hier: http://www.tippscout.de/windows-xp-ip-adresse-des-computers-ermitteln-und-herausfinden_tipp_2676.html
|
||||
6. Nun startest du das Display auf pc2 trägst aber statt "127.0.0.1" die IP-Adresse von pc1 ein (Die Adresse sollte mit "192.168." beginnen)
|
||||
7. Los gehts :)
|
||||
|
||||
Q: Läuft der Server mit nodeJs auch unter Linux / Läuft der Python Server auch unter Windows?
|
||||
|
||||
A: Ja, dafür müssen jedoch zunächst die etsprechenden Abhänigkeiten installiert werden.
|
||||
|
||||
Q: Gibt es eine Funktion um Leuten über einen Link direkt das Zuschauen zu ermöglichen?
|
||||
A: Ja. Der Link lautet: http://SERVERURL/PFAD/index.html?viewonly=true (SERVERURL und PFAD anpassen!)
|
||||
Q: In der letzten Version waren die Fragen in der Fragen.txt noch im Klartext gespeichert, was ist passiert?
|
||||
|
||||
Q: Ich erhalten im Serverfenster den Fehler: Error: listen EADDRINUSE
|
||||
A: Eine andere Anwendung blockiert bereits den Port. Beende diese und starte den Server erneut
|
||||
A: Da Linux mit Umlauten nicht umgehen kann werden die Fragen Base64 encoded abgelegt.
|
||||
|
||||
Q: Ich habe sonstige Fehler bei (Anzeige, Verbindungsaufbau, Anwendungsverhalten)
|
||||
A: Falls du einen anderen Browser als Google Chrome verwendest, installiere Chrome.
|
||||
Q: Wie kann ich meine Alten Fragen (Klartext) in das neue System (Base64) übertragen?
|
||||
|
||||
Sonstige Fragen, Fehlermeldungen, Beschwerden oder auch Spenden (Paypal) per Mail an: raphael.fritsch@gmx.de
|
||||
A: Wandle den Inhalt deiner fragen.txt in Base64. Dies geht einfach online: https://www.base64encode.org/ . Überschreibe anschließend deine Fragen.txt mit dem neuen Inhalt. Fetig.
|
||||
|
||||
---------------------------
|
||||
|
||||
Programmierung: cracker
|
||||
Fragen an: rofl256@googlemail.com
|
||||
|
||||
Programmierung: cracker aka rofl256
|
||||
Unterstützt durch: DiggerTigger, Anni & Naseile
|
||||
|
||||
Danke auch an:
|
||||
* [flbe](https://github.com/flbe) für den Python Server
|
||||
* [susgo](https://github.com/susgo) für den Finalmodus
|
||||
* [ConvalAtGit](https://github.com/ConvalAtGit) für viele Verbesserungen, Redesign und zusätzliche Word und Excel Dokumente
|
||||
* [fruitcoder](https://github.com/fruitcoder/) Design verbesserungen
|
||||
Danke an: [flbe](https://github.com/flbe) für den Python Server
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
||||
[InternetShortcut]
|
||||
URL=http://127.0.0.1:8080/
|
||||
File diff suppressed because one or more lines are too long
@ -1,41 +1,9 @@
|
||||
//Websocket Server <<<<<<<<<<<<<<
|
||||
var wsPort = 8081;
|
||||
var webPort = 8080;
|
||||
var wsPort = 8080;
|
||||
var subscribers = [];
|
||||
var WebSocketServer = require('ws').Server;
|
||||
var wss = new WebSocketServer({port: wsPort});
|
||||
var http = require('http');
|
||||
var url = require('url');
|
||||
var path = require('path');
|
||||
var WebSocketServer = require('ws').Server
|
||||
, wss = new WebSocketServer({port: wsPort});
|
||||
var fs = require('fs');
|
||||
var baseDirectory = '../web/'
|
||||
|
||||
http.createServer(function (request, response) {
|
||||
try {
|
||||
var rurl = request.url;
|
||||
if(rurl=="/") {
|
||||
rurl = "/index.html";
|
||||
}
|
||||
var requestUrl = url.parse(rurl)
|
||||
|
||||
// need to use path.normalize so people can't access directories underneath baseDirectory
|
||||
var fsPath = baseDirectory+path.normalize(requestUrl.pathname);
|
||||
|
||||
var fileStream = fs.createReadStream(fsPath)
|
||||
fileStream.pipe(response)
|
||||
fileStream.on('open', function() {
|
||||
response.writeHead(200)
|
||||
})
|
||||
fileStream.on('error',function(e) {
|
||||
response.writeHead(404) // assume the file doesn't exist
|
||||
response.end()
|
||||
})
|
||||
} catch(e) {
|
||||
response.writeHead(500)
|
||||
response.end() // end the response so browsers don't hang
|
||||
console.log(e.stack)
|
||||
}
|
||||
}).listen(webPort)
|
||||
|
||||
wss.on('connection', function(ws) {
|
||||
subscribers.push(ws);
|
||||
@ -49,7 +17,7 @@ wss.on('connection', function(ws) {
|
||||
console.log("~~~~~~~~ WELCOME TO SERVER ~~~~~~ s:"+subscribers.length);
|
||||
ws.on('message', function(message) {
|
||||
console.log('msg: ' + message);
|
||||
var parts = message.toString().split("###");
|
||||
var parts = message.split("###");
|
||||
if(parts[0] != "fileOp") {
|
||||
broadcastMessage(getClientId(), message);
|
||||
} else {
|
||||
@ -89,25 +57,14 @@ wss.on('connection', function(ws) {
|
||||
});
|
||||
|
||||
function broadcastMessage(clientId, msg) {
|
||||
console.log("broadcast:", msg.toString().split("###")[0], "length:", subscribers.length);
|
||||
console.log("broadcast:"+msg.split("###")[0]+" length:"+subscribers.length);
|
||||
for(var i=0;i<subscribers.length;i++) {
|
||||
if(subscribers[i] != null)
|
||||
subscribers[i].send(msg);
|
||||
}
|
||||
}
|
||||
|
||||
console.log("\nWebsocket server running on Port:"+wsPort);
|
||||
console.log("Webserver running on Port:"+webPort);
|
||||
|
||||
console.log("\n---Verbinden von diesem PC---");
|
||||
console.log(" Browser öffnen und zu Adresse: http://127.0.0.1:"+webPort+" surfen!");
|
||||
|
||||
console.log("\n---Adressen zum verbinden von anderen Geräten---");
|
||||
getLocalIp()
|
||||
|
||||
console.log("\n\n------------------------------");
|
||||
console.log("\n---SERVER IS UP AND RUNNING---");
|
||||
console.log("\n------------------------------");
|
||||
console.log("Websocket Server running at ws://127.0.0.1:"+wsPort);
|
||||
|
||||
function writeInFile(filename, content, callback) {
|
||||
console.log("going to read file:"+filename);
|
||||
@ -135,27 +92,4 @@ function readFile(filename, callback) {
|
||||
});
|
||||
}
|
||||
|
||||
function getLocalIp() {
|
||||
var os = require('os');
|
||||
var ifaces = os.networkInterfaces();
|
||||
|
||||
Object.keys(ifaces).forEach(function (ifname) {
|
||||
var alias = 0;
|
||||
|
||||
ifaces[ifname].forEach(function (iface) {
|
||||
if ('IPv4' !== iface.family || iface.internal !== false) {
|
||||
// skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
|
||||
return;
|
||||
}
|
||||
|
||||
if (alias >= 1) {
|
||||
// this single interface has multiple ipv4 addresses
|
||||
console.log(" http://"+iface.address+":"+webPort);
|
||||
} else {
|
||||
// this interface has only one ipv4 adress
|
||||
console.log(" "+ifname+": ", "http://"+iface.address+":"+webPort);
|
||||
}
|
||||
++alias;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
#!/usr/bin/env python
|
||||
#Benötigte Module: asyncio websockets
|
||||
|
||||
import asyncio
|
||||
import datetime
|
||||
|
||||
129
web/css/main.css
129
web/css/main.css
@ -1,27 +1,11 @@
|
||||
body {
|
||||
font-family: monospace;
|
||||
background: url(../img/background.jpg) no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: center; /* Vertikale Zentrierung */
|
||||
justify-content: center; /* Horizontale Zentrierung */
|
||||
}
|
||||
|
||||
#allContent {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.textColor {
|
||||
color:#ddff06;
|
||||
color:#aeb130;
|
||||
font-weight:bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.bgColor{
|
||||
background:#000000;
|
||||
background:#525463;
|
||||
}
|
||||
|
||||
.antwortInp, .questionIn, .questionKIn {
|
||||
@ -42,115 +26,6 @@ body {
|
||||
color:gray;
|
||||
}
|
||||
|
||||
.xmarker {
|
||||
font-family: Verdana, Helvetica, sans-serif;
|
||||
font-weight: bold;
|
||||
z-index: 3;
|
||||
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
|
||||
border: 2px #595959 solid;
|
||||
border-radius: 2px;
|
||||
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.15), 1px 1px 1px rgba(255, 255, 255, 0.20);
|
||||
font-size: 2em;
|
||||
background: #595959;
|
||||
height: 56px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
color: rgb(66, 66, 66);
|
||||
/* box-shadow: 5px 5px 5px -1px rgba(0, 0, 0, 0.65), 0 5px 5px -5px rgba(0, 0, 0, 0.65); */
|
||||
}
|
||||
|
||||
.noIntro {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background:#ddff06;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#buttonsDownUnder {
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
margin-top: 70px;
|
||||
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
#buttonsDownUnder td{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mainHeight {
|
||||
position: relative;
|
||||
width: 80vw;
|
||||
height: 40vw;
|
||||
min-height: 520px;
|
||||
min-width: 1020px;
|
||||
margin: auto;
|
||||
margin-bottom: 50px;
|
||||
z-index: 5;
|
||||
border: 10px #c0c0c0 ridge;
|
||||
border-radius: 2px;
|
||||
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
#timer {
|
||||
background: #000000;
|
||||
z-index: 5;
|
||||
border: 10px #c0c0c0 ridge;
|
||||
border-radius: 2px;
|
||||
box-shadow: 3px 5px 35px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
#blackScreen {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
#editQuestionsDiv {
|
||||
border-radius: 2px;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
#answers {
|
||||
overflow: hidden;
|
||||
font-family: monospace;
|
||||
font-size: 2.5vw;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.answer {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#displayQuestions {
|
||||
overflow: hidden;
|
||||
font-size: 2.5vw;
|
||||
white-space: unset;
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
#resultFinal {
|
||||
font-size: 2.5vw;
|
||||
}
|
||||
|
||||
.questionAnswerContainer {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
@media (max-width: 1275px) {
|
||||
#answers {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#resultFinal {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#displayQuestions {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
142
web/duell.html
Normal file
142
web/duell.html
Normal file
@ -0,0 +1,142 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
|
||||
<head>
|
||||
<title>Familien Duell</title>
|
||||
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jquery-ui-1.10.4.min.js"></script>
|
||||
<script type="text/javascript" src="./js/websocket.js"></script>
|
||||
<script type="text/javascript" src="./js/typed.js"></script>
|
||||
<script type="text/javascript" src="./js/main.js"></script>
|
||||
<script type="text/javascript" src="./js/components.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/main.css">
|
||||
</head>
|
||||
<body style="padding:10px;">
|
||||
<div id="allContent">
|
||||
<div id="startDiv" style="width: 500px; margin: auto;">
|
||||
<h1 style="font-size: 5em;">Familien Duell</h1>
|
||||
<button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br>
|
||||
<button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button>
|
||||
<hr id="DHR" style="margin:0px; width:100%; position:relative; top:3px; border-top:1px solid black;">
|
||||
</div>
|
||||
<div class="bgColor textColor" style="display:none; position:relative; width: 1000px; height:500px; margin: auto;" id="display">
|
||||
<img id="schweinchenImg" style="margin-left: 200px; margin-top: 70px;" src="./img/schweinchen.jpg">
|
||||
<div id="answers" style="font-family: monospace; padding-top: 10px; padding-left: 18px; font-size: 1.5em;">
|
||||
|
||||
</div>
|
||||
<div class="noIntro" id="result" style="position:absolute; bottom:80px; right:45px; font-size: 1.5em;">
|
||||
<div style="float:left; padding-right: 20px;">SUMME</div>
|
||||
<div style="float:left; font-size: 0.8em; position: relative; top: 12; left:14px; color: red; cursor:pointer;" class="controller" id="pointsToTheLeft"><i class="fa fa-chevron-left"></i></div>
|
||||
<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes">0</div>
|
||||
<div style="float:left; font-size: 0.8em; position: relative; top: 12; color: red; cursor:pointer;" class="controller" id="pointsToTheRight"><i class="fa fa-chevron-right"></i></div>
|
||||
</div>
|
||||
<div class="noIntro" id="footer1" style="position:absolute; bottom:0px; background:#aeb130; width:100%; height:50px; color:rgb(100, 100, 100); font-size: 2em;">
|
||||
<div style="position:absolute; left:5px; top: -5px;" class="pointsLeft">0</div>
|
||||
<div style="position:absolute; right:5px; top: -5px;" class="pointsRight">0</div>
|
||||
</div>
|
||||
<div class="noIntro" id="footer2" style="position:absolute; bottom:58px; background:#aeb130; width:100%; height:5px;"></div>
|
||||
<div class="xmarker noIntro" style="position: absolute; bottom: -50px; left: 34; font-size: 2em; background: #525463; height: 50px; padding-left: 12px; padding-right: 12px; color: rgb(127, 115, 115);" ></div>
|
||||
<div class="xmarker noIntro" style="position: absolute; bottom: -50px; right: 34; font-size: 2em; background: #525463; height: 50px; padding-left: 12px; padding-right: 12px; color: rgb(127, 115, 115);" ></div>
|
||||
<img style="position: absolute; top: 0px;" class="intro" src="./img/logo.png">
|
||||
</div>
|
||||
<div style="display:none;" class="controller">
|
||||
<div id="frageDiv" style="top:500px; width:660px; margin:auto;">
|
||||
Frage:
|
||||
</div>
|
||||
<div id="editQuestionsDiv" style="display:none; background: rgba(214, 205, 205, 0.95); padding-left:20px; position: absolute; top: 0px; width: 99%; min-height: 100%;">
|
||||
<i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i>
|
||||
<h1 style="margin-left:50px;">Frageneditor</h1>
|
||||
<div>
|
||||
<ul id="fragenListe">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div >
|
||||
<button style="margin-left:50px;" id="addNewQuestionBtn">Neue Frage hinzufügen!</button>
|
||||
<button style="margin-left:50px; position:fixed; top: 10px; right: 100; font-size: 2em;" id="saveNewQuestions">Speichern!</button>
|
||||
</div>
|
||||
</div><br><br><br>
|
||||
<div id="buttonsDownUnder">
|
||||
<table border="1">
|
||||
<tr>
|
||||
<td><b>Global</b></td>
|
||||
<td><b>Server</b></td>
|
||||
<td><b>Intro</b></td>
|
||||
<td><b>Jeopardy</b></td>
|
||||
<td><b>Schweinchen</b></td>
|
||||
<td><b>Clear Fails</b></td>
|
||||
<td><b>Punkte</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
|
||||
<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/noSound.png"></td>
|
||||
<td>
|
||||
<button id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
|
||||
<button id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
|
||||
<img width="20px;" src="./img/noSound.png">
|
||||
<input id="introVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
|
||||
<img width="20px;" src="./img/soundOn.png"><br>
|
||||
Blackscreen: <input id="blackScreenCheck" checked="checked" type="checkbox">
|
||||
</td>
|
||||
<td>
|
||||
<button id="startJeopardybtn"><i class="fa fa-play"></i> Jeopardy</button><br>
|
||||
<button id="stopJeopardybtn"><i class="fa fa-stop"></i> Jeopardy</button><br>
|
||||
<img width="20px;" src="./img/noSound.png">
|
||||
<input id="jeopardyVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
|
||||
<img width="20px;" src="./img/soundOn.png">
|
||||
</td>
|
||||
<td>
|
||||
<button id="startScheinchenbtn"><i class="fa fa-play"></i> Schweinchen</button><br>
|
||||
<button id="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br>
|
||||
<img width="20px;" src="./img/noSound.png">
|
||||
<input id="schweinchenVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
|
||||
<img width="20px;" src="./img/soundOn.png">
|
||||
</td>
|
||||
<td>
|
||||
<button id="clearAllFailsBtn">Clear all Fails!</button>
|
||||
</td>
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Punkte Links: </td> <td><input style="width:50px;" id="mPunkteLeft" type="number" value="0"></td><td><button id="newLeftPoints">ok</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Punkte Rechts: </td> <td><input style="width:50px;" id="mPunkteRight" type="number" value="0"></td><td><button id="newRightPoints">ok</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>Fragenliste:</b><br>
|
||||
<select style="min-width: 400px;" size="5" id="questionsSelcet">
|
||||
|
||||
</select>
|
||||
</td>
|
||||
<td style="font-size:3em; padding-top: 25px;">
|
||||
<i id="upQicon" class="fa fa-sort-desc upDownArrow"></i><br>
|
||||
<i id="downQicon" class="fa fa-sort-asc upDownArrow"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button id="openFragenEditorBtn"><i class="fa fa-tasks"></i> Frageneditor</button>
|
||||
<button id="printQuestions"><i class="fa fa-print"></i></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="notConnected" style="position:absolute; left:0px; top:0px; padding:5px;"><img width="50px" src="./img/notConnected.png"></div>
|
||||
<div id="connected" style="position:absolute; left:0px; top:0px; padding:5px; display:none;"></div>
|
||||
<div id="blackScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:black;"></div>
|
||||
</div>
|
||||
<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
|
||||
<i id="closePrintScreenIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i>
|
||||
<div id="printDiv"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
BIN
web/img/schweinchen.jpg
Normal file
BIN
web/img/schweinchen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
182
web/index.html
182
web/index.html
@ -1,165 +1,39 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Familien Duell</title>
|
||||
<title>Familienduell</title>
|
||||
<script type="text/javascript" src="./js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jquery-ui-1.10.4.min.js"></script>
|
||||
<script type="text/javascript" src="./js/websocket.js"></script>
|
||||
<script type="text/javascript" src="./js/typed.js"></script>
|
||||
<script type="text/javascript" src="./js/main.js"></script>
|
||||
<script type="text/javascript" src="./js/components.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/main.css">
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script type="text/javascript">
|
||||
var ip = null;
|
||||
$(document).ready(function() {
|
||||
if(typeof(Storage) !== "undefined") {
|
||||
if(localStorage.getItem("ip") == null) {
|
||||
$("#ip").val("127.0.0.1");
|
||||
} else {
|
||||
$("#ip").val(localStorage.getItem("ip"));
|
||||
}
|
||||
} else {
|
||||
alert("Bitte einen neueren Browser verwenden!")
|
||||
}
|
||||
|
||||
$("#startButton").click(function() {
|
||||
localStorage.setItem("ip", $("#ip").val());
|
||||
window.location.href = "duell.html";
|
||||
$("#not").show();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body style="padding:10px;">
|
||||
<div id="allContent">
|
||||
<!-- Select between display and controller -->
|
||||
<body>
|
||||
<div id="startDiv" style="width: 500px; margin: auto;">
|
||||
<h1 style="font-size: 5em;">Familienduell</h1>
|
||||
<button id="displayBtn" style="font-size: 2em; width:500px;"><i class="fa fa-desktop"></i> DISPLAY</button><br>
|
||||
<button id="controllerBtn" style="font-size: 2em; width:500px; margin-top:2px;"><i class="fa fa-keyboard-o"></i> CONTROLLER</button>
|
||||
</div>
|
||||
<!-- container with all questions, answers, pigs, countdown, intro image, points-->
|
||||
<div class="topContainer bgColor textColor mainHeight" style="display:none" id="display">
|
||||
<img id="schweinchen1Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none; overflow: hidden;" src="./img/schweinchen1.png">
|
||||
<img id="schweinchen2Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen2.png">
|
||||
<img id="schweinchen3Img" style="height: 75%; top: 12.5%; position: absolute; left:0; right:0; margin-left: auto; margin-right: auto; display: none;" src="./img/schweinchen3.png">
|
||||
<!-- question text is injected in `loadQuestionToGui(index:)` (server.js) -->
|
||||
<div id="displayQuestions" class="textColor questionAnswerContainer">
|
||||
</div>
|
||||
<!-- answer divs are injected in `loadQuestionToGui(index:)` (server.js) -->
|
||||
<div id="answers" class="questionAnswerContainer">
|
||||
</div>
|
||||
<div id="result" style="position:absolute; bottom:65px; right:38px; font-size: 1.5em;">
|
||||
<div style="float:left; padding-right: 20px;" class="header_summe">SUMME</div>
|
||||
<div style="float:left; font-size: 0.8em; position: relative; top: 12; left:14px; color: red; cursor:pointer;" class="controller" id="pointsToTheLeft"><i class="fa fa-chevron-left"></i></div>
|
||||
<div class="noIntro" style="width:50px; float: left; text-align:right;" id="SumRes">0</div>
|
||||
<div style="float:left; font-size: 0.8em; position: relative; top: 12; color: red; cursor:pointer;" class="controller" id="pointsToTheRight"><i class="fa fa-chevron-right"></i></div>
|
||||
</div>
|
||||
<div id="resultFinal" style="position:absolute; bottom:95px; width:100%; font-size: 1.5em; display: none;">
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<div class="noIntro" style="width:6%; float: left; text-align:center;" id="SumRes_player1">0</div>
|
||||
<div class="noIntro" style="width:6%; float: right; text-align:center;" id="SumRes_player2">0</div>
|
||||
<h1 style="font-size: 5em;">Familien Duell</h1>
|
||||
Server IP-Adresse: <input id="ip" type="text"> <button id="startButton">Start</button>
|
||||
<div style="display:none" id="not">
|
||||
<a href="duell.html">Falls die Weiterleitung nicht funktioniert, bitte hier klicken!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="timer" style="position:absolute; top: 50%; left: 50%; width: 400px; margin-left: -200px; margin-top: -143px; text-align: center; padding: 0px 30px 10px 30px; font-size: 200px; display: none;">
|
||||
20
|
||||
</div>
|
||||
<div class="noIntro footer" id="footer1" style="position:absolute; bottom:0px; width:100%; height:50px; font-size: 2em;">
|
||||
<div style="position:absolute; left:35px; top: -5px;" class="pointsLeft">0</div>
|
||||
<div style="position:absolute; left:50%; width: 80px; margin-left: -40px; top: -5px; text-align: center" id="pointsCenter">0</div>
|
||||
<div style="position:absolute; right:35px; top: -5px;" class="pointsRight">0</div>
|
||||
</div>
|
||||
<!--<div class="noIntro footer" id="footer2" style="position:absolute; bottom:108px; width:100%; height:5px;"></div>-->
|
||||
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; left: 34px" ></div>
|
||||
<div class="xmarker noIntro" style="position: absolute; bottom: -64px; right: 34px" ></div>
|
||||
<img style="position: absolute; top: 0px; width: 100%; height: 100%;" class="intro" src="./img/logo.png">
|
||||
</div>
|
||||
<!-- controller container -->
|
||||
<div style="display:none;" class="controller">
|
||||
<div id="buttonsDownUnder">
|
||||
<table border="1">
|
||||
<tr>
|
||||
<!-- <td><b>Global</b></td>
|
||||
<td><b>Server</b></td> -->
|
||||
<td><b>Intro</b></td>
|
||||
<td><b>Schweinchen</b></td>
|
||||
<td><b>Optionen</b></td>
|
||||
<td><b><label for="modeFinal">Finalmodus</b> </label><input id="modeFinal" type="checkbox" style="vertical-align: text-bottom" /> <button style="float:right;" id="finalmodusInfoBtn">Info</button></td>
|
||||
<td><b>Spielende</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!-- <td><img id="toggleSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td>
|
||||
<td><img id="serverSoundImg" style="cursor:pointer;" width="35px;" src="./img/soundOn.png"></td> -->
|
||||
<td>
|
||||
<button style=" display: block" id="startIntroBtn"><i class="fa fa-play"></i> Intro!</button><br>
|
||||
<label for="blackScreenCheck">Blackscreen:</label> <input id="blackScreenCheck" checked="checked" type="checkbox" style="vertical-align: text-bottom" />
|
||||
<button style="margin-top: 12px; display: block" id="stopIntroBtn"><i class="fa fa-stop"></i> Intro!</button><br>
|
||||
</td>
|
||||
<td>
|
||||
Multiplikator: <input id="pointMultiplicator" type="number" name="" value="1" style="width: 50px;"><br>
|
||||
<button id="startScheinchenbtn" value="1"><i class="fa fa-play"></i> Schweinchen</button><br>
|
||||
<button id="startScheinchenbtn2" value="2"><i class="fa fa-play"></i> Schweinchen (2x)</button><br>
|
||||
<button id="startScheinchenbtn3" value="3"><i class="fa fa-play"></i> Schweinchen (3x)</button><br>
|
||||
<button id="stopScheinchenbtn"><i class="fa fa-stop"></i> Schweinchen</button><br>
|
||||
</td>
|
||||
<td>
|
||||
<button id="clearAllFailsBtn">Clear all Fails!</button><br><br>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Punkte Links: </td> <td><input style="width:50px;" id="mPunkteLeft" type="number" value="0"></td><td><button id="newLeftPoints">ok</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Punkte Rechts: </td> <td><input style="width:50px;" id="mPunkteRight" type="number" value="0"></td><td><button id="newRightPoints">ok</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Punkte Summe: </td> <td><input style="width:50px;" id="mPunkteSum" type="number" value="0"></td><td><button id="newSumRes">ok</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
<td>
|
||||
<!-- <button id="startAnswerDuplicateBtn"><i class="fa fa-play"></i> Antwort doppelt</button><br>
|
||||
<img width="20px;" src="./img/noSound.png">
|
||||
<input id="answerFailVolume" style="width: 50px;" type="range" value="10" name="points" min="0" max="10">
|
||||
<img width="20px;" src="./img/soundOn.png"> -->
|
||||
<div>
|
||||
<label for="spieler1">Spieler 1:</label> <input class="playerTgl finalElement" disabled="true" checked="true" type="radio" value="1" name="fmod" id="spieler1" style="vertical-align: text-bottom" /> <button id="showTimerBtn" disabled="true" class="finalElement">Timer anzeigen</button><br>
|
||||
<label for="spieler2">Spieler 2:</label> <input class="playerTgl finalElement" disabled="true" type="radio" value="2" name="fmod" id="spieler2" style="vertical-align: text-bottom" /> <button id="startTimerBtn" disabled="true" class="finalElement"><i class="fa fa-play"></i> Timer starten</button><br>
|
||||
<label for="finalFragenSelect">Frage:</label> <select class="finalElement" disabled="true" id="finalFragenSelect">
|
||||
<option value="0"> 1</option>
|
||||
<option value="1"> 2</option>
|
||||
<option value="2"> 3</option>
|
||||
<option value="3"> 4</option>
|
||||
<option value="4"> 5</option>
|
||||
</select> <button id="stopTimerBtn" disabled="true" class="finalElement"><i class="fa fa-stop"></i> Timer stoppen</button><br>
|
||||
Alternative Antwort:<br> <input class="finalElement" id="alternateAnswer" maxlength="20" disabled="true" type="text" name=""><button class="finalElement" id="alternateAnswerBtn" disabled="true">setzen</button><br><input type="number" class="finalElement" id="altPointsFinal" disabled="true" placeholder="Alt. Punkte" value="0"><button class="finalElement" id="alternateAnswerPBtn" disabled="true">setzen</button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button id="showFinalScores">Show Final Scores</button><br><br>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table>
|
||||
<tr>
|
||||
<td><b>Fragenliste:</b><br>
|
||||
<select style="min-width: 400px;" size="5" id="questionsSelect">
|
||||
|
||||
</select>
|
||||
</td>
|
||||
<td style="font-size:3em; padding-top: 25px;">
|
||||
<i id="upQicon" class="fa fa-sort-desc upDownArrow"></i><br>
|
||||
<i id="downQicon" class="fa fa-sort-asc upDownArrow"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<button id="openFragenEditorBtn"><i class="fa fa-tasks"></i> Frageneditor</button>
|
||||
<button id="printQuestions"><i class="fa fa-print"></i></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="editQuestionsDiv" style="display:none; background: rgba(205, 205, 205, 0.95); padding-left:20px; position: absolute; top: 0px; width: 100%; min-height: 100%;">
|
||||
<h1 style="margin-left:50px;">Frageneditor</h1>
|
||||
<div>
|
||||
<ul id="fragenListe">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div >
|
||||
<button style="margin-left:50px; margin-bottom: 50px;" id="addNewQuestionBtn">Neue Frage hinzufügen!</button>
|
||||
<button style="margin-left:50px; position:fixed; top: 20px; right: 200px; font-size: 2em;" id="saveNewQuestions">Speichern!</button>
|
||||
<button id="closeFragenEditorIcon" style="margin-left:50px; position:fixed; top: 20px; right: 30px; font-size: 2em;" id="saveNewQuestions">Schließen</button>
|
||||
<!-- <i id="closeFragenEditorIcon" style="position: fixed; right: 30px; top: 10px; font-size: 1.2em; cursor:pointer;" class="fa fa-caret-square-o-down"></i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="connected" style="position:fixed; left:0px; top:0px; padding:5px; display:none;"></div>
|
||||
</div>
|
||||
<div id="printScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:white;">
|
||||
<div id="printDiv"></div>
|
||||
</div>
|
||||
<div id="blackScreen" style="display:none; position:absolute; left:0px; top:0px; width:100%; height:100%; background:black;"></div>
|
||||
<div id="notConnected" style="position:absolute; left:0px; top:0px; padding:5px;"><img width="50px" src="./img/notConnected.png"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,8 +2,7 @@ function init_xmarker() {
|
||||
var c =0;
|
||||
$.each($(".xmarker"), function() {
|
||||
for(var i=0; i<3;i++) {
|
||||
var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-left: 4px; padding-right: 4px">X</span>');
|
||||
var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-left: 4px; padding-right: 4px">X</span>');
|
||||
var span = $('<span class="marker'+(c)+'" style="cursor:pointer; position:relative; top:-5px; padding-right: 5px;">X</span>');
|
||||
|
||||
console.log("sow"+i);
|
||||
(function() {
|
||||
|
||||
16
web/js/jquery-ui-1.10.4.min.js
vendored
16
web/js/jquery-ui-1.10.4.min.js
vendored
File diff suppressed because one or more lines are too long
484
web/js/main.js
484
web/js/main.js
@ -1,81 +1,54 @@
|
||||
var fragen = null;
|
||||
var intro = null;
|
||||
var introVolume = 1;
|
||||
var answerFail = null;
|
||||
var jeopardy = null;
|
||||
var schweinchenVolume = 1;
|
||||
var answerFailVolume = 1;
|
||||
var jeopardyVolume = 1;
|
||||
var schweinchen = null;
|
||||
// when the points for a round are assigned, we still want to show the other answers but no points should be calculated by that time
|
||||
// reset when changing a question
|
||||
var currentRoundPointsResolved = false;
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$( "#fragenListe" ).sortable();
|
||||
$( "#fragenListe" ).disableSelection();
|
||||
|
||||
$("#closePrintScreenIcon").click(function() {
|
||||
$("#printScreen").hide();
|
||||
$("#allContent").show();
|
||||
});
|
||||
|
||||
$("#printQuestions").click(function() {
|
||||
$("#printDiv").empty();
|
||||
showQuestionsAsPrint();
|
||||
$("#printScreen").show();
|
||||
$("#allContent").hide();
|
||||
window.print();
|
||||
$("#printScreen").hide();
|
||||
$("#allContent").show();
|
||||
});
|
||||
|
||||
$("#blackScreenCheck").change(function() {
|
||||
wsSend("toggleBlackScreen", "");
|
||||
});
|
||||
|
||||
$("#modeFinal").change(function() {
|
||||
var status = $('#modeFinal').is(':checked');
|
||||
wsSend("toggleFinalMode", status);
|
||||
$("#startJeopardybtn").click(function() {
|
||||
$("#startJeopardybtn").attr("disabled", "disabled");
|
||||
wsSend("startJeopardy", "");
|
||||
});
|
||||
|
||||
$(".playerTgl").change(function() {
|
||||
var player = $(this).val() == 1 ? false : true;
|
||||
wsSend("setPlayer2ForFinalMode", player);
|
||||
$("#stopJeopardybtn").click(function() {
|
||||
$("#startJeopardybtn").removeAttr("disabled");
|
||||
wsSend("stopJeopardy", "");
|
||||
});
|
||||
|
||||
$("#startAnswerFailBtn").click(function() {
|
||||
wsSend("startAnswerFail", "");
|
||||
});
|
||||
|
||||
$("#startAnswerDuplicateBtn").click(function() {
|
||||
wsSend("startAnswerDuplicate", "");
|
||||
});
|
||||
|
||||
$("#showTimerBtn").click(function() {
|
||||
wsSend("showTimer", "");
|
||||
});
|
||||
|
||||
$("#startTimerBtn").click(function() {
|
||||
wsSend("startTimer", "");
|
||||
});
|
||||
|
||||
$("#stopTimerBtn").click(function() {
|
||||
wsSend("stopTimer", "");
|
||||
});
|
||||
|
||||
$("#answerFailVolume").on("input", function() {
|
||||
$("#jeopardyVolume").on("input", function() {
|
||||
var v = parseFloat($(this).val()) / 10;
|
||||
wsSend("setAnswerFailVolume", v);
|
||||
wsSend("setJeopardyVolume", v);
|
||||
});
|
||||
|
||||
$("button[id^='startScheinchenbtn']").each(function(){
|
||||
$(this).click(function() {
|
||||
var status = $(this).attr('value');
|
||||
$("#pointMultiplicator").val(status)
|
||||
console.log('status' + status);
|
||||
wsSend("setRunde", status);
|
||||
$(this).attr("disabled", "disabled");
|
||||
$("#startScheinchenbtn").click(function() {
|
||||
$("#startScheinchenbtn").attr("disabled", "disabled");
|
||||
wsSend("startSchweinchen", "");
|
||||
});
|
||||
});
|
||||
|
||||
$("#stopScheinchenbtn").click(function() {
|
||||
$("button[id^='startScheinchenbtn']").each(function(){
|
||||
$(this).removeAttr("disabled");
|
||||
});
|
||||
$("#startScheinchenbtn").removeAttr("disabled");
|
||||
wsSend("stopSchweinchen", "");
|
||||
});
|
||||
|
||||
@ -102,42 +75,18 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
$("#upQicon").click(function() {
|
||||
var index = $("#questionsSelect>option:selected").index();
|
||||
var index = $("#questionsSelcet>option:selected").index();
|
||||
index--;
|
||||
if (isFinalMode) {
|
||||
var questionSelected = $("#finalFragenSelect").val();
|
||||
questionSelected--;
|
||||
if (questionSelected < 0) {
|
||||
// $("#finalFragenSelect").val(0);
|
||||
} else {
|
||||
$("#finalFragenSelect").val(questionSelected)
|
||||
}
|
||||
}
|
||||
|
||||
if (index > 0) {
|
||||
setFrageIndex(index);
|
||||
}
|
||||
});
|
||||
|
||||
$("#downQicon").click(function() {
|
||||
var index = $("#questionsSelect>option:selected").index();
|
||||
var index = $("#questionsSelcet>option:selected").index();
|
||||
index++;
|
||||
if (isFinalMode) {
|
||||
var questionSelected = $("#finalFragenSelect").val();
|
||||
questionSelected++;
|
||||
if (questionSelected > 4) {
|
||||
// $("#finalFragenSelect").val(0);
|
||||
} else {
|
||||
$("#finalFragenSelect").val(questionSelected)
|
||||
}
|
||||
}
|
||||
|
||||
if (index < 8) {
|
||||
setFrageIndex(index);
|
||||
}
|
||||
});
|
||||
|
||||
$("#questionsSelect").on("change", function() {
|
||||
$("#questionsSelcet").on("change", function() {
|
||||
changeFrage();
|
||||
});
|
||||
|
||||
@ -157,16 +106,15 @@ $(document).ready(function() {
|
||||
});
|
||||
|
||||
$("#pointsToTheLeft").click(function() {
|
||||
var points = parseFloat($(".pointsLeft").text()) + parseFloat($("#SumRes").text())*$("#pointMultiplicator").val();
|
||||
var points = parseFloat($(".pointsLeft").text()) + parseFloat($("#SumRes").text());
|
||||
wsSend("setLeftPoints", points);
|
||||
$("#SumRes").text("0");
|
||||
});
|
||||
|
||||
$("#pointsToTheRight").click(function() {
|
||||
var points = parseFloat($(".pointsRight").text()) + parseFloat($("#SumRes").text())*$("#pointMultiplicator").val();
|
||||
var points = parseFloat($(".pointsRight").text()) + parseFloat($("#SumRes").text());
|
||||
wsSend("setRightPoints", points);
|
||||
$("#SumRes").text("0");
|
||||
$("#pointsCenter").text("0");
|
||||
});
|
||||
|
||||
$("#newLeftPoints").click(function() {
|
||||
@ -177,64 +125,10 @@ $(document).ready(function() {
|
||||
wsSend("setRightPoints", $("#mPunkteRight").val());
|
||||
});
|
||||
|
||||
$("#newSumRes").click(function() {
|
||||
wsSend("setSumRes", $("#mPunkteSum").val());
|
||||
});
|
||||
|
||||
$("#alternateAnswerBtn").click(function(){
|
||||
var is = $("#finalFragenSelect").val();
|
||||
var answer = $("#alternateAnswer").val();
|
||||
wsSend("setAnswer", is+"###"+answer);
|
||||
});
|
||||
|
||||
$("#alternateAnswerPBtn").click(function(){
|
||||
var is = $("#finalFragenSelect").val();
|
||||
var p = $("#altPointsFinal").val() > 0 ? $("#altPointsFinal").val() : 0;
|
||||
wsSend("setAnz", is+"###"+p);
|
||||
});
|
||||
|
||||
$("#finalmodusInfoBtn").click(function(){
|
||||
alert("Im Finalmodus geklickte Antworten und Punkte werden nur auf dem Display angezeigt!")
|
||||
});
|
||||
});
|
||||
|
||||
function setFinalMode(status){
|
||||
isFinalMode = status == "true" ? true : false;
|
||||
$(".finalElement").attr("disabled", !isFinalMode);
|
||||
var index = $("#questionsSelect>option:selected").index();
|
||||
index = index > 0 ? index : 0;
|
||||
$("#answers").empty();
|
||||
|
||||
// automatically select first of the final questions (index 3)
|
||||
if (isFinalMode < 3) {
|
||||
index = 3;
|
||||
}
|
||||
|
||||
loadQuestionToGui(index);
|
||||
|
||||
// manually select option once final mode starts
|
||||
if (isFinalMode) {
|
||||
if (index >= 0 && index < $("#questionsSelect").find("option").length) {
|
||||
$("#questionsSelect").find("option").removeAttr("selected");
|
||||
$($("#questionsSelect").find("option")[index]).prop("selected", "true");
|
||||
}
|
||||
if ($("#questionsSelect>option:selected").index() == -1 && $("#questionsSelect").find("option")[0]) {
|
||||
$($("#questionsSelect").find("option")[0]).prop("selected", "true");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setPlayer2(value){
|
||||
value = value == "true" ? true : false;
|
||||
player2 = value;
|
||||
}
|
||||
|
||||
function setRunde(value){
|
||||
runde = value;
|
||||
}
|
||||
|
||||
function showQuestionsAsPrint() {
|
||||
var ges = '<h2 style="margin-left:30px;">Familienduell Fragen</h2><ol>';
|
||||
var ges = '<ol>';
|
||||
for(var i=0;i<fragen.length;i++) {
|
||||
ges += '<li>'+fragen[i]["frage"]+'</li>';
|
||||
}
|
||||
@ -245,10 +139,8 @@ function showQuestionsAsPrint() {
|
||||
function setLeftPoints(newPoints) {
|
||||
$(".pointsLeft").text(newPoints);
|
||||
$("#mPunkteLeft").val(newPoints);
|
||||
$("#sumRes").text("0");
|
||||
$("#pointsCenter").text("0");
|
||||
if(sounds && (display || serverSound)) {
|
||||
audio = new Audio('./sounds/zahlRichtig.ogg');
|
||||
audio = new Audio('./sounds/zahlRichtig.mp3');
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
@ -256,115 +148,43 @@ function setLeftPoints(newPoints) {
|
||||
function setRightPoints(newPoints) {
|
||||
$(".pointsRight").text(newPoints);
|
||||
$("#mPunkteRight").val(newPoints);
|
||||
$("#sumRes").text("0");
|
||||
$("#pointsCenter").text("0");
|
||||
if(sounds && (display || serverSound)) {
|
||||
audio = new Audio('./sounds/zahlRichtig.ogg');
|
||||
audio = new Audio('./sounds/zahlRichtig.mp3');
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
|
||||
function setSumRes(newSumRes) {
|
||||
$('#SumRes').text(newSumRes);
|
||||
$("#mPunkteSum").val(newSumRes);
|
||||
recalcSum(0);
|
||||
}
|
||||
|
||||
function startAnswerFail() {
|
||||
function startJeopardy() {
|
||||
if(sounds && (display || serverSound)) {
|
||||
answerFail = new Audio('./sounds/failOriginal.ogg');
|
||||
answerFail.volume = answerFailVolume;
|
||||
answerFail.play();
|
||||
jeopardy = new Audio('./sounds/jeopardy.mp3');
|
||||
jeopardy.volume = jeopardyVolume;
|
||||
jeopardy.play();
|
||||
}
|
||||
}
|
||||
|
||||
function startAnswerDuplicate() {
|
||||
if (sounds && (display || serverSound)) {
|
||||
answerDuplicate = new Audio('./sounds/failFinal.ogg');
|
||||
answerDuplicate.volume = answerFailVolume;
|
||||
answerDuplicate.play();
|
||||
}
|
||||
}
|
||||
|
||||
function showTimer() {
|
||||
if (display) {
|
||||
if (player2) {
|
||||
$("#timer").text("25");
|
||||
} else {
|
||||
$("#timer").text("20");
|
||||
}
|
||||
$("#timer").fadeIn();
|
||||
}
|
||||
}
|
||||
|
||||
function startTimer() {
|
||||
if (display) {
|
||||
var timer = parseInt($("#timer").text());
|
||||
if ((timer == 20 && !player2) || (player2 && timer == 25)) {
|
||||
if (sounds && (display || serverSound)) {
|
||||
// window.document.timerTick = new Audio('./sounds/tick.ogg');
|
||||
// window.document.timerTick.volume = answerFailVolume;
|
||||
// window.document.timerTick.play();
|
||||
}
|
||||
window.document.timerId = setInterval(function() { startTimer(); }, 1000);
|
||||
}
|
||||
timer--;
|
||||
if (timer > 0) {
|
||||
$("#timer").text(timer);
|
||||
} else {
|
||||
clearInterval(window.document.timerId);
|
||||
// window.document.timerTick.pause();
|
||||
// window.document.timerTick.currentTime = 0;
|
||||
$("#timer").fadeOut();
|
||||
if (sounds && (display || serverSound)) {
|
||||
timerEnd = new Audio('./sounds/failOriginal.ogg');
|
||||
timerEnd.volume = answerFailVolume;
|
||||
timerEnd.play();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopTimer() {
|
||||
if (display) {
|
||||
clearInterval(window.document.timerId);
|
||||
// window.document.timerTick.pause();
|
||||
// window.document.timerTick.currentTime = 0;
|
||||
$("#timer").fadeOut();
|
||||
function stopJeopardy() {
|
||||
if(jeopardy) {
|
||||
jeopardy.pause();
|
||||
}
|
||||
}
|
||||
|
||||
function startSchweinchen() {
|
||||
if (runde == 2){
|
||||
$("#schweinchen2Img").show("blind", { direction: "left" }, 1500);
|
||||
} else if (runde == 3){
|
||||
$("#schweinchen3Img").show("blind", { direction: "left" }, 1500);
|
||||
} else {
|
||||
$("#schweinchen1Img").show("blind", { direction: "left" }, 1500);
|
||||
}
|
||||
|
||||
$("#schweinchenImg").show();
|
||||
$("#answers").hide();
|
||||
$("#displayQuestions").hide();
|
||||
$("#result").hide();
|
||||
$(".footer").hide();
|
||||
|
||||
if(sounds && (display || serverSound)) {
|
||||
schweinchen = new Audio('./sounds/schweinchen.ogg');
|
||||
schweinchen = new Audio('./sounds/schweinchen.wav');
|
||||
schweinchen.volume = schweinchenVolume;
|
||||
schweinchen.play();
|
||||
}
|
||||
}
|
||||
|
||||
function stopSchweinchen() {
|
||||
var index = $("#questionsSelect>option:selected").index();
|
||||
$("#questionsSelect").val(index+1);
|
||||
var index = $("#questionsSelcet>option:selected").index();
|
||||
$("#questionsSelcet").val(index+1);
|
||||
changeFrage();
|
||||
|
||||
$("#schweinchen3Img").stop(true, true).hide();
|
||||
$("#schweinchen1Img").stop(true, true).hide();
|
||||
$("#schweinchen2Img").stop(true, true).hide();
|
||||
$("#result").show();
|
||||
$(".footer").show("blind", { direction: "left" }, 1500);
|
||||
$("#schweinchenImg").hide();
|
||||
$("#answers").show();
|
||||
if(schweinchen) {
|
||||
schweinchen.pause();
|
||||
}
|
||||
@ -372,7 +192,7 @@ function stopSchweinchen() {
|
||||
|
||||
function hideIntro() {
|
||||
$(".noIntro").show();
|
||||
$(".intro").fadeOut();
|
||||
$(".intro").hide();
|
||||
if(intro) {
|
||||
intro.pause();
|
||||
}
|
||||
@ -380,112 +200,64 @@ function hideIntro() {
|
||||
|
||||
function showIntro() {
|
||||
$(".noIntro").hide();
|
||||
$(".intro").fadeIn();
|
||||
$(".intro").show();
|
||||
if(sounds && (display || serverSound)) {
|
||||
intro = new Audio('./sounds/intro.ogg');
|
||||
intro = new Audio('./sounds/intro.mp3');
|
||||
intro.volume = introVolume;
|
||||
intro.play();
|
||||
}
|
||||
}
|
||||
|
||||
function fillFragenSelect() {
|
||||
$("#questionsSelect").empty();
|
||||
$("#questionsSelcet").empty();
|
||||
for(var i=0;i<fragen.length;i++) {
|
||||
$("#questionsSelect").append('<option value="'+i+'">'+fragen[i]["kuerzel"]+'</option>');
|
||||
$("#questionsSelcet").append('<option value="'+i+'">'+fragen[i]["kuerzel"]+'</option>');
|
||||
}
|
||||
}
|
||||
|
||||
function setFrageIndex(index) {
|
||||
if (index >= 0 && index < $("#questionsSelect").find("option").length) {
|
||||
$("#questionsSelect").find("option").removeAttr("selected");
|
||||
$($("#questionsSelect").find("option")[index]).prop("selected", "true");
|
||||
}
|
||||
if ($("#questionsSelect>option:selected").index() == -1 && $("#questionsSelect").find("option")[0]) {
|
||||
$($("#questionsSelect").find("option")[0]).prop("selected", "true");
|
||||
if(index >= 0 && index < $("#questionsSelcet").find("option").length) {
|
||||
$("#questionsSelcet").find("option").removeAttr("selected");
|
||||
$($("#questionsSelcet").find("option")[index]).prop("selected", "true");
|
||||
}
|
||||
if($("#questionsSelcet>option:selected").index() == -1 && $("#questionsSelcet").find("option")[0] )
|
||||
$($("#questionsSelcet").find("option")[0]).prop("selected", "true");
|
||||
|
||||
changeFrage();
|
||||
}
|
||||
|
||||
function changeFrage() {
|
||||
var index = $("#questionsSelect>option:selected").index();
|
||||
var index = $("#questionsSelcet>option:selected").index();
|
||||
wsSend("loadQuestion", index);
|
||||
wsSend("clearAllFailsBtn", "");
|
||||
wsSend("resetPointsResolvedFlag", "false");
|
||||
}
|
||||
|
||||
function loadQuestionToGui(index) {
|
||||
$("#schweinchen3Img").hide();
|
||||
$("#schweinchen1Img").hide();
|
||||
$("#schweinchen2Img").hide();
|
||||
$("#schweinchenImg").hide();
|
||||
$("#answers").empty();
|
||||
|
||||
$(".pointsLeft").toggle(!isFinalMode);
|
||||
$(".pointsRight").toggle(!isFinalMode);
|
||||
$(".xmarker").toggle(!isFinalMode);
|
||||
$("#ResSum_player1").toggle(isFinalMode);
|
||||
$("#ResSum_player2").toggle(isFinalMode);
|
||||
if (isFinalMode){
|
||||
$("#resultFinal").show();
|
||||
$(".footer").hide();
|
||||
} else {
|
||||
$("#resultFinal").hide();
|
||||
}
|
||||
$("#result").toggle(!isFinalMode);
|
||||
|
||||
if(index > -1) {
|
||||
$("#displayQuestions").html(fragen[index]["frage"]);
|
||||
if (isFinalMode && display){
|
||||
$("#displayQuestions").hide();
|
||||
} else {
|
||||
$("#displayQuestions").show("blind", { direction: "left" }, 1500);
|
||||
}
|
||||
var anzahlFragen = fragen[index]["antworten"].length;
|
||||
if (isFinalMode) {
|
||||
anzahlFragen = 5;
|
||||
}
|
||||
for (var i = 0; i < anzahlFragen; i++) {
|
||||
if(isFinalMode || fragen[index]["antworten"][i]["antwort"] != "") {
|
||||
if (isFinalMode) {
|
||||
var oneLine = $('<div>' +
|
||||
'<div style="width: 44%; float: left; text-align: center" class="answer"></div>' +
|
||||
'<div style="width: 6%; float: left; text-align: center" class="points"></div>' +
|
||||
'<div style="width: 6%; float: left; text-align: center" class="points_player2"></div>' +
|
||||
'<div style="width: 44%; float: left; text-align: center" class="answer_player2"></div>' +
|
||||
$("#frageDiv").html("Frage: "+fragen[index]["frage"]);
|
||||
for(var i=0;i<fragen[index]["antworten"].length;i++) {
|
||||
if(fragen[index]["antworten"][i]["antwort"] != "") {
|
||||
var oneLine = $('<div style="height:55px">'+
|
||||
'<div style="width: 52px; float: left;" class="nr">'+(i+1)+'.</div>'+
|
||||
'<div style="width: 860px; float: left;" class="answer"></div>'+
|
||||
'<div style="width: 52px; float: left;" class="points"></div>'+
|
||||
'</div>');
|
||||
} else {
|
||||
var oneLine = $('<div>' +
|
||||
'<div style="width: 5%; text-align: center; float: left;" class="nr">' + (i + 1) + '.</div>' +
|
||||
'<div style="width: 89%; text-align: center; float: left" class="answer"></div>' +
|
||||
'<div style="width: 6%; float: left; text-align: right" class="points"></div>' +
|
||||
'</div>');
|
||||
}
|
||||
if(display && !player2) {
|
||||
oneLine.find(".answer").text("..............................................................................................................");
|
||||
if(display) {
|
||||
oneLine.find(".answer").text("_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _");
|
||||
oneLine.find(".points").text("--");
|
||||
|
||||
if (isFinalMode){
|
||||
oneLine.find(".points_player2").text("--");
|
||||
oneLine.find(".answer_player2").text("..............................................................................................................");
|
||||
// oneLine.find(".answer_player2").text("_ _ _ _ _ _ _ _ _ _ _");
|
||||
}
|
||||
} else if (!display) {
|
||||
} else {
|
||||
oneLine.find(".answer").html('<span class="markOnHover">'+getAnswerString(fragen[index]["antworten"][i]["antwort"])+'</span>');
|
||||
oneLine.find(".points").html('<span class="markOnHover">'+fragen[index]["antworten"][i]["anz"]+'</span>');
|
||||
(function() {
|
||||
var is = i;
|
||||
var is2 = i;
|
||||
var frage = fragen[index];
|
||||
oneLine.find(".answer").click(function() {
|
||||
if (isFinalMode){
|
||||
is = $("#finalFragenSelect").val();
|
||||
}
|
||||
wsSend("setAnswer", is+"###"+frage["antworten"][is2]["antwort"]);
|
||||
wsSend("setAnswer", is+"###"+frage["antworten"][is]["antwort"]);
|
||||
});
|
||||
oneLine.find(".points").click(function() {
|
||||
if (isFinalMode){
|
||||
is = $("#finalFragenSelect").val();
|
||||
}
|
||||
wsSend("setAnz", is+"###"+frage["antworten"][is2]["anz"]);
|
||||
wsSend("setAnz", is+"###"+frage["antworten"][is]["anz"]);
|
||||
});
|
||||
})();
|
||||
}
|
||||
@ -493,125 +265,46 @@ function loadQuestionToGui(index) {
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!isFinalMode) {
|
||||
$("#SumRes").text("0");
|
||||
$("#answers").show("blind", { direction: "left" }, 1500);
|
||||
}
|
||||
if(!display)
|
||||
$("#resultFinal").hide();
|
||||
|
||||
if (isFinalMode){
|
||||
if (!player2) {
|
||||
$('#SumRes_player1').html("0");
|
||||
$('#SumRes_player2').html("0");
|
||||
}
|
||||
}
|
||||
if (!player2) {
|
||||
recalcSum(0);
|
||||
}
|
||||
}
|
||||
|
||||
function setAnswer(index, answer) {
|
||||
if(!(isFinalMode && !display)) { //not do it at final mode and controller
|
||||
var answer_select = ".answer";
|
||||
if (player2){
|
||||
answer_select = '.answer_player2';
|
||||
}
|
||||
answer = getAnswerString(answer);
|
||||
var el = $($("#answers").find(answer_select)[index]);
|
||||
//el.empty();
|
||||
var el = $($("#answers").find(".answer")[index]);
|
||||
el.empty();
|
||||
if(sounds && (display || serverSound)) {
|
||||
audio = new Audio('./sounds/textRichtig.ogg');
|
||||
audio = new Audio('./sounds/textRichtig.mp3');
|
||||
audio.play();
|
||||
}
|
||||
el.typed({
|
||||
strings: [answer],
|
||||
typeSpeed: 10,
|
||||
overwrite: true,
|
||||
showCursor: false,
|
||||
cursorChar: "",
|
||||
fadeOut: false,
|
||||
fadeOutDelay: 0,
|
||||
typeSpeed: 20
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setAnz(index, nr) {
|
||||
if(!(isFinalMode && !display)) { //not do it at final mode and controller
|
||||
var points_select = ".points";
|
||||
if (player2){
|
||||
points_select = '.points_player2';
|
||||
}
|
||||
var el = $($("#answers").find(points_select)[index]);
|
||||
var el = $($("#answers").find(".points")[index]);
|
||||
el.text(nr);
|
||||
if(sounds && (display || serverSound)) {
|
||||
audio = new Audio('./sounds/zahlRichtig.ogg');
|
||||
audio = new Audio('./sounds/zahlRichtig.mp3');
|
||||
audio.play();
|
||||
}
|
||||
recalcSum(nr);
|
||||
}
|
||||
}
|
||||
|
||||
function recalcSum(s) {
|
||||
var sum_selector = '#SumRes';
|
||||
if (isFinalMode) {
|
||||
var p1p = 0;
|
||||
var p2p = 0;
|
||||
$.each($(".points"), function() {
|
||||
var v = $(this).text();
|
||||
if(v != "--") {
|
||||
p1p = p1p + parseFloat(v);
|
||||
}
|
||||
});
|
||||
$.each($(".points_player2"), function() {
|
||||
var v = $(this).text();
|
||||
if(v != "--") {
|
||||
p2p = p2p + parseFloat(v);
|
||||
}
|
||||
});
|
||||
$("#SumRes_player1").text(p1p);
|
||||
$("#SumRes_player2").text(p2p);
|
||||
if (display) {
|
||||
$("#pointsCenter").text(p1p + p2p);
|
||||
} else {
|
||||
$("#pointsCenter").text("");
|
||||
}
|
||||
} else {
|
||||
$(sum_selector).text(parseFloat($(sum_selector).text())+parseFloat(s));
|
||||
$("#pointsCenter").text(parseFloat($(sum_selector).text())*runde);
|
||||
}
|
||||
}
|
||||
|
||||
// Add the scores from the final rounds to the current scores from previous rounds
|
||||
function showFinalScores() {
|
||||
$("#answers").hide();
|
||||
$("#displayQuestions").hide();
|
||||
$("#result").hide();
|
||||
$("#resultFinal").hide();
|
||||
$("#pointsCenter").hide();
|
||||
$(".pointsLeft").show();
|
||||
$(".pointsRight").show();
|
||||
|
||||
const leftFinalScore = parseFloat($("#SumRes_player1").text());
|
||||
const rightFinalScore = parseFloat($("#SumRes_player2").text());
|
||||
|
||||
$(".pointsLeft").text(parseFloat($(".pointsLeft").text()) + leftFinalScore);
|
||||
$(".pointsRight").text(parseFloat($(".pointsRight").text()) + rightFinalScore);
|
||||
|
||||
// show final scores with blinds
|
||||
$(".footer").show("blind", { direction: "left" }, 1500);
|
||||
$("#SumRes").text(parseFloat($("#SumRes").text())+parseFloat(s));
|
||||
}
|
||||
|
||||
function getAnswerString(str) {
|
||||
if (isFinalMode){
|
||||
while(str.length < 24) {
|
||||
str = " " + str;
|
||||
}
|
||||
} else {
|
||||
str += " ";
|
||||
while(str.length < 47) {
|
||||
str += ".";
|
||||
var anz = str.length;
|
||||
if(anz%2==0) {
|
||||
str+="_";
|
||||
}
|
||||
anz = str.length;
|
||||
while(str.length < 40) {
|
||||
str+= " _";
|
||||
}
|
||||
return str;
|
||||
}
|
||||
@ -644,7 +337,7 @@ function saveQuestions() {
|
||||
objToSave.push(oneQ);
|
||||
});
|
||||
var jsonQues = JSON.stringify(objToSave);
|
||||
jsonQues = btoa(encodeURIComponent(jsonQues));
|
||||
jsonQues = btoa(jsonQues);
|
||||
wsSend("fileOp","write###fragen.txt###"+jsonQues);
|
||||
}
|
||||
|
||||
@ -654,11 +347,20 @@ function addNewQuestion(frage) {
|
||||
'<td>Frage:</td><td><input class="questionIn" type="text"></td>'+
|
||||
'</tr><tr>'+
|
||||
'<td>Kürzel:</td><td><input class="questionKIn" type="text"></td>'+
|
||||
'</tr>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 1:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 2:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 3:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 4:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 5:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr class="antTr">'+
|
||||
'<td>Antwort 6:</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td>'+
|
||||
'</tr><tr>'+
|
||||
'</table></li>');
|
||||
for(var i=1;i<7;i++) {
|
||||
newQHtml.find("table").append('<tr class="antTr"><td>Antwort '+i+':</td><td><input class="antwortInp" type="text"><input class="anz" type="number" min="1" max="100"></td></tr>');
|
||||
}
|
||||
if(frage != null) {
|
||||
newQHtml.find(".questionIn").val(frage["frage"]);
|
||||
newQHtml.find(".questionKIn").val(frage["kuerzel"]);
|
||||
|
||||
461
web/js/typed.js
461
web/js/typed.js
@ -1,6 +1,6 @@
|
||||
// The MIT License (MIT)
|
||||
|
||||
// Typed.js | Copyright (c) 2016 Matt Boldt | www.mattboldt.com
|
||||
// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com
|
||||
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
@ -23,37 +23,19 @@
|
||||
|
||||
|
||||
|
||||
! function(window, document, $) {
|
||||
!function($){
|
||||
|
||||
"use strict";
|
||||
|
||||
var Typed = function(el, options){
|
||||
var self = this;
|
||||
|
||||
// chosen element to manipulate text
|
||||
this.el = el;
|
||||
|
||||
this.el = $(el);
|
||||
// options
|
||||
this.options = {};
|
||||
Object.keys(defaults).forEach(function(key) {
|
||||
self.options[key] = defaults[key];
|
||||
});
|
||||
Object.keys(options).forEach(function(key) {
|
||||
self.options[key] = options[key];
|
||||
});
|
||||
|
||||
// attribute to type into
|
||||
this.isInput = this.el.tagName.toLowerCase() === 'input';
|
||||
this.attr = this.options.attr;
|
||||
|
||||
// show cursor
|
||||
this.showCursor = this.isInput ? false : this.options.showCursor;
|
||||
this.options = $.extend({}, $.fn.typed.defaults, options);
|
||||
|
||||
// text content of element
|
||||
this.elContent = this.attr ? this.el.getAttribute(this.attr) : this.el.textContent;
|
||||
|
||||
// html or plain text
|
||||
this.contentType = this.options.contentType;
|
||||
this.text = this.el.text();
|
||||
|
||||
// typing speed
|
||||
this.typeSpeed = this.options.typeSpeed;
|
||||
@ -67,18 +49,6 @@
|
||||
// amount of time to wait before backspacing
|
||||
this.backDelay = this.options.backDelay;
|
||||
|
||||
// Fade out instead of backspace
|
||||
this.fadeOut = this.options.fadeOut;
|
||||
this.fadeOutClass = this.options.fadeOutClass;
|
||||
this.fadeOutDelay = this.options.fadeOutDelay;
|
||||
|
||||
// div containing strings
|
||||
if($ && this.options.stringsElement instanceof $) {
|
||||
this.stringsElement = this.options.stringsElement[0]
|
||||
} else {
|
||||
this.stringsElement = this.options.stringsElement;
|
||||
}
|
||||
|
||||
// input strings of text
|
||||
this.strings = this.options.strings;
|
||||
|
||||
@ -88,6 +58,9 @@
|
||||
// current array position
|
||||
this.arrayPos = 0;
|
||||
|
||||
// current string based on current values[] array position
|
||||
this.string = this.strings[this.arrayPos];
|
||||
|
||||
// number to stop backspacing on.
|
||||
// default 0, can change depending on how many chars
|
||||
// you want to remove at the time
|
||||
@ -96,96 +69,46 @@
|
||||
// Looping logic
|
||||
this.loop = this.options.loop;
|
||||
this.loopCount = this.options.loopCount;
|
||||
this.curLoop = 0;
|
||||
|
||||
// for stopping
|
||||
this.stop = false;
|
||||
|
||||
// custom cursor
|
||||
this.cursorChar = this.options.cursorChar;
|
||||
|
||||
// shuffle the strings
|
||||
this.shuffle = this.options.shuffle;
|
||||
// the order of strings
|
||||
this.sequence = [];
|
||||
this.curLoop = 1;
|
||||
if (this.loop === false){
|
||||
// number in which to stop going through array
|
||||
// set to strings[] array (length - 1) to stop deleting after last string is typed
|
||||
this.stopArray = this.strings.length-1;
|
||||
}
|
||||
else{
|
||||
this.stopArray = this.strings.length;
|
||||
}
|
||||
|
||||
// All systems go!
|
||||
this.build();
|
||||
};
|
||||
}
|
||||
|
||||
Typed.prototype = {
|
||||
|
||||
constructor: Typed,
|
||||
constructor: Typed
|
||||
|
||||
init: function() {
|
||||
// begin the loop w/ first current string (global self.strings)
|
||||
, init: function(){
|
||||
// begin the loop w/ first current string (global self.string)
|
||||
// current string will be passed as an argument each time after this
|
||||
var self = this;
|
||||
self.timeout = setTimeout(function() {
|
||||
for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;
|
||||
|
||||
// shuffle the array if true
|
||||
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
||||
|
||||
var elContent;
|
||||
if (self.isInput) {
|
||||
elContent = self.el.value;
|
||||
} else if (self.contentType === 'html') {
|
||||
elContent = self.el.innerHTML;
|
||||
} else {
|
||||
elContent = self.el.textContent;
|
||||
}
|
||||
setTimeout(function() {
|
||||
// Start typing
|
||||
// Check if there is some text in the element, if yes start by backspacing the default message
|
||||
if (elContent.length == 0) {
|
||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
|
||||
} else if (self.options && self.options.overwrite) {
|
||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
|
||||
} else {
|
||||
self.backspace(elContent, elContent.length);
|
||||
}
|
||||
self.typewrite(self.string, self.strPos)
|
||||
}, self.startDelay);
|
||||
},
|
||||
}
|
||||
|
||||
build: function() {
|
||||
var self = this;
|
||||
, build: function(){
|
||||
// Insert cursor
|
||||
if (this.showCursor === true) {
|
||||
this.cursor = document.createElement('span');
|
||||
this.cursor.className = 'typed-cursor';
|
||||
this.cursor.innerHTML = this.cursorChar;
|
||||
this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);
|
||||
}
|
||||
if (this.stringsElement) {
|
||||
this.strings = [];
|
||||
this.stringsElement.style.display = 'none';
|
||||
var strings = Array.prototype.slice.apply(this.stringsElement.children);
|
||||
strings.forEach(function(stringElement){
|
||||
self.strings.push(stringElement.innerHTML);
|
||||
});
|
||||
}
|
||||
//this.el.after("<span id=\"typed-cursor\">|</span>");
|
||||
this.init();
|
||||
},
|
||||
|
||||
// pass current string state to each function, types 1 char per call, if overwrite is true the existing string will be replaced char by char
|
||||
typewrite: function(curString, curStrPos, curOverwritePos) {
|
||||
// exit when stopped
|
||||
if (this.stop === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!curOverwritePos) {
|
||||
curOverwritePos = curStrPos;
|
||||
}
|
||||
|
||||
if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
|
||||
this.el.classList.remove(this.fadeOutClass);
|
||||
this.cursor.classList.remove(this.fadeOutClass);
|
||||
}
|
||||
// pass current string state to each function
|
||||
, typewrite: function(curString, curStrPos){
|
||||
|
||||
// varying values for setTimeout during typing
|
||||
// can't be global since number changes each time loop is executed
|
||||
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
|
||||
var humanize = Math.round(Math.random() * (30 - 30)) + this.typeSpeed;
|
||||
var self = this;
|
||||
|
||||
// ------------- optional ------------- //
|
||||
@ -196,125 +119,87 @@
|
||||
// }
|
||||
// else{ self.backDelay = 500; }
|
||||
|
||||
// contain typing function in a timeout humanize'd delay
|
||||
self.timeout = setTimeout(function() {
|
||||
// contain typing function in a timeout
|
||||
setTimeout(function() {
|
||||
|
||||
// make sure array position is less than array length
|
||||
if (self.arrayPos < self.strings.length){
|
||||
|
||||
// check for an escape character before a pause value
|
||||
// format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
|
||||
// single ^ are removed from string
|
||||
var charPause = 0;
|
||||
var substr = curString.substr(curStrPos);
|
||||
if (substr.charAt(0) === '^') {
|
||||
var skip = 1; // skip atleast 1
|
||||
if (/^\^\d+/.test(substr)) {
|
||||
substr = /\d+/.exec(substr)[0];
|
||||
skip += substr.length;
|
||||
charPause = parseInt(substr);
|
||||
}
|
||||
|
||||
if (curString.substr(curStrPos, 1) === "^") {
|
||||
var charPauseEnd = curString.substr(curStrPos + 1).indexOf(" ");
|
||||
var charPause = curString.substr(curStrPos + 1, charPauseEnd);
|
||||
// strip out the escape character and pause value so they're not printed
|
||||
curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
|
||||
}
|
||||
|
||||
if (self.contentType === 'html') {
|
||||
// skip over html tags while typing
|
||||
var curChar = curString.substr(curStrPos).charAt(0);
|
||||
if (curChar === '<' || curChar === '&') {
|
||||
var tag = '';
|
||||
var endTag = '';
|
||||
if (curChar === '<') {
|
||||
endTag = '>'
|
||||
curString = curString.replace("^" + charPause, "");
|
||||
}
|
||||
else {
|
||||
endTag = ';'
|
||||
}
|
||||
while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
|
||||
tag += curString.substr(curStrPos).charAt(0);
|
||||
curStrPos++;
|
||||
if (curStrPos + 1 > curString.length) { break; }
|
||||
}
|
||||
curStrPos++;
|
||||
tag += endTag;
|
||||
}
|
||||
var charPause = 0;
|
||||
}
|
||||
|
||||
// timeout for any pause after a character
|
||||
self.timeout = setTimeout(function() {
|
||||
if (curStrPos === curString.length) {
|
||||
// fires callback function
|
||||
self.options.onStringTyped(self.arrayPos);
|
||||
|
||||
// is this the final string
|
||||
if (self.arrayPos === self.strings.length - 1) {
|
||||
// animation that occurs on the last typed string
|
||||
self.options.callback();
|
||||
|
||||
self.curLoop++;
|
||||
|
||||
// quit if we wont loop back
|
||||
if (self.loop === false || self.curLoop === self.loopCount)
|
||||
return;
|
||||
}
|
||||
|
||||
self.timeout = setTimeout(function() {
|
||||
self.backspace(curString, curStrPos);
|
||||
}, self.backDelay);
|
||||
|
||||
} else {
|
||||
|
||||
/* call before functions if applicable */
|
||||
if (curStrPos === 0) {
|
||||
self.options.preStringTyped(self.arrayPos);
|
||||
}
|
||||
setTimeout(function() {
|
||||
|
||||
// start typing each new char into existing string
|
||||
// curString: arg, self.el.html: original text inside element
|
||||
var nextString = curString.substr(0, curStrPos + 1);
|
||||
if (self.options && self.options.overwrite) {
|
||||
nextString += self.el.textContent.substr(curOverwritePos + 1);
|
||||
// curString is function arg
|
||||
self.el.text(self.text + curString.substr(0, curStrPos));
|
||||
|
||||
// check if current character number is the string's length
|
||||
// and if the current array position is less than the stopping point
|
||||
// if so, backspace after backDelay setting
|
||||
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
|
||||
clearTimeout(clear);
|
||||
self.options.onStringTyped();
|
||||
var clear = setTimeout(function(){
|
||||
self.backspace(curString, curStrPos);
|
||||
}, self.backDelay);
|
||||
}
|
||||
|
||||
// else, keep typing
|
||||
else{
|
||||
// add characters one by one
|
||||
curStrPos++;
|
||||
// loop the function
|
||||
self.typewrite(curString, curStrPos);
|
||||
// if the array position is at the stopping position
|
||||
// finish code, on to next task
|
||||
if (self.loop === false){
|
||||
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
|
||||
// animation that occurs on the last typed string
|
||||
// fires callback function
|
||||
var clear = self.options.callback();
|
||||
clearTimeout(clear);
|
||||
}
|
||||
if (self.attr) {
|
||||
self.el.setAttribute(self.attr, nextString);
|
||||
} else {
|
||||
if (self.isInput) {
|
||||
self.el.value = nextString;
|
||||
} else if (self.contentType === 'html') {
|
||||
self.el.innerHTML = nextString;
|
||||
} else {
|
||||
self.el.textContent = nextString;
|
||||
}
|
||||
}
|
||||
|
||||
// add characters one by one
|
||||
curStrPos++;
|
||||
curOverwritePos++;
|
||||
// loop the function
|
||||
self.typewrite(curString, curStrPos, curOverwritePos);
|
||||
}
|
||||
// end of character pause
|
||||
}, charPause);
|
||||
}
|
||||
// if the array position is greater than array length
|
||||
// and looping is active, reset array pos and start over.
|
||||
else if (self.loop === true && self.loopCount === false){
|
||||
self.arrayPos = 0;
|
||||
self.init();
|
||||
}
|
||||
else if(self.loopCount !== false && self.curLoop < self.loopCount){
|
||||
self.arrayPos = 0;
|
||||
self.curLoop = self.curLoop+1;
|
||||
self.init();
|
||||
}
|
||||
|
||||
// humanized value for typing
|
||||
}, humanize);
|
||||
|
||||
},
|
||||
|
||||
backspace: function(curString, curStrPos) {
|
||||
var self = this;
|
||||
// exit when stopped
|
||||
if (this.stop === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.fadeOut){
|
||||
this.initFadeOut();
|
||||
return;
|
||||
}
|
||||
, backspace: function(curString, curStrPos){
|
||||
|
||||
// varying values for setTimeout during typing
|
||||
// can't be global since number changes each time loop is executed
|
||||
var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
|
||||
var self = this;
|
||||
|
||||
self.timeout = setTimeout(function() {
|
||||
setTimeout(function() {
|
||||
|
||||
// ----- this part is optional ----- //
|
||||
// check string array position
|
||||
@ -329,24 +214,9 @@
|
||||
// self.stopNum = 0;
|
||||
// }
|
||||
|
||||
if (self.contentType === 'html') {
|
||||
// skip over html tags while backspacing
|
||||
if (curString.substr(curStrPos).charAt(0) === '>') {
|
||||
var tag = '';
|
||||
while (curString.substr(curStrPos - 1).charAt(0) !== '<') {
|
||||
tag -= curString.substr(curStrPos).charAt(0);
|
||||
curStrPos--;
|
||||
if (curStrPos < 0) { break; }
|
||||
}
|
||||
curStrPos--;
|
||||
tag += '<';
|
||||
}
|
||||
}
|
||||
|
||||
// ----- continue important stuff ----- //
|
||||
// replace text with base text + typed characters
|
||||
var nextString = curString.substr(0, curStrPos);
|
||||
self.replaceText(nextString);
|
||||
// replace text with current text + typed characters
|
||||
self.el.text(self.text + curString.substr(0, curStrPos));
|
||||
|
||||
// if the number (id of character in current string) is
|
||||
// less than the stop number, keep going
|
||||
@ -359,174 +229,49 @@
|
||||
// if the stop number has been reached, increase
|
||||
// array position to next string
|
||||
else if (curStrPos <= self.stopNum){
|
||||
self.arrayPos++;
|
||||
|
||||
if (self.arrayPos === self.strings.length) {
|
||||
self.arrayPos = 0;
|
||||
|
||||
// Shuffle sequence again
|
||||
if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);
|
||||
|
||||
self.init();
|
||||
} else
|
||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
|
||||
clearTimeout(clear);
|
||||
var clear = self.arrayPos = self.arrayPos+1;
|
||||
// must pass new array position in this instance
|
||||
// instead of using global arrayPos
|
||||
self.typewrite(self.strings[self.arrayPos], curStrPos);
|
||||
}
|
||||
|
||||
// humanized value for typing
|
||||
}, humanize);
|
||||
|
||||
},
|
||||
|
||||
// Adds a CSS class to fade out current string
|
||||
initFadeOut: function(){
|
||||
self = this;
|
||||
this.el.className += ' ' + this.fadeOutClass;
|
||||
this.cursor.className += ' ' + this.fadeOutClass;
|
||||
return setTimeout(function() {
|
||||
self.arrayPos++;
|
||||
self.replaceText('');
|
||||
|
||||
// Resets current string if end of loop reached
|
||||
if(self.strings.length > self.arrayPos) {
|
||||
self.typewrite(self.strings[self.sequence[self.arrayPos]], 0);
|
||||
} else {
|
||||
self.typewrite(self.strings[0], 0);
|
||||
self.arrayPos = 0;
|
||||
}
|
||||
}, self.fadeOutDelay);
|
||||
},
|
||||
|
||||
// Replaces current text in the HTML element
|
||||
replaceText: function(str) {
|
||||
if (this.attr) {
|
||||
this.el.setAttribute(this.attr, str);
|
||||
} else {
|
||||
if (this.isInput) {
|
||||
this.el.value = str;
|
||||
} else if (this.contentType === 'html') {
|
||||
this.el.innerHTML = str;
|
||||
} else {
|
||||
this.el.textContent = str;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Shuffles the numbers in the given array.
|
||||
shuffleArray: function(array) {
|
||||
var tmp, current, top = array.length;
|
||||
if(top) while(--top) {
|
||||
current = Math.floor(Math.random() * (top + 1));
|
||||
tmp = array[current];
|
||||
array[current] = array[top];
|
||||
array[top] = tmp;
|
||||
}
|
||||
return array;
|
||||
},
|
||||
|
||||
// Start & Stop currently not working
|
||||
|
||||
// , stop: function() {
|
||||
// var self = this;
|
||||
|
||||
// self.stop = true;
|
||||
// clearInterval(self.timeout);
|
||||
// }
|
||||
|
||||
// , start: function() {
|
||||
// var self = this;
|
||||
// if(self.stop === false)
|
||||
// return;
|
||||
|
||||
// this.stop = false;
|
||||
// this.init();
|
||||
// }
|
||||
|
||||
// Reset and rebuild the element
|
||||
reset: function() {
|
||||
var self = this;
|
||||
clearInterval(self.timeout);
|
||||
var id = this.el.getAttribute('id');
|
||||
if (!self.options || !self.options.overwrite) {
|
||||
this.el.textContent = '';
|
||||
}
|
||||
if (typeof this.cursor !== 'undefined' && typeof this.cursor.parentNode !== 'undefined') {
|
||||
this.cursor.parentNode.removeChild(this.cursor);
|
||||
}
|
||||
this.strPos = 0;
|
||||
this.arrayPos = 0;
|
||||
this.curLoop = 0;
|
||||
// Send the callback
|
||||
this.options.resetCallback();
|
||||
}
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
Typed.new = function(selector, option) {
|
||||
var elements = Array.prototype.slice.apply(document.querySelectorAll(selector));
|
||||
elements.forEach(function(element) {
|
||||
var instance = element._typed,
|
||||
options = typeof option == 'object' && option;
|
||||
if (instance) { instance.reset(); }
|
||||
element._typed = instance = new Typed(element, options);
|
||||
if (typeof option == 'string') instance[option]();
|
||||
});
|
||||
};
|
||||
|
||||
if ($) {
|
||||
$.fn.typed = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this),
|
||||
data = $this.data('typed'),
|
||||
options = typeof option == 'object' && option;
|
||||
if (data) { data.reset(); }
|
||||
$this.data('typed', (data = new Typed(this, options)));
|
||||
if (typeof option == 'string') data[option]();
|
||||
var $this = $(this)
|
||||
, data = $this.data('typed')
|
||||
, options = typeof option == 'object' && option
|
||||
if (!data) $this.data('typed', (data = new Typed(this, options)))
|
||||
if (typeof option == 'string') data[option]()
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
window.Typed = Typed;
|
||||
|
||||
var defaults = {
|
||||
$.fn.typed.defaults = {
|
||||
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
|
||||
stringsElement: null,
|
||||
// typing speed
|
||||
typeSpeed: 0,
|
||||
// time before typing starts
|
||||
startDelay: 0,
|
||||
// backspacing speed
|
||||
backSpeed: 0,
|
||||
// shuffle the strings
|
||||
shuffle: false,
|
||||
// existing text will be overwritten instead of removing it first
|
||||
overwrite: false,
|
||||
// time before backspacing
|
||||
backDelay: 500,
|
||||
// Fade out instead of backspace
|
||||
fadeOut: false,
|
||||
fadeOutClass: 'typed-fade-out',
|
||||
fadeOutDelay: 500, // milliseconds
|
||||
// loop
|
||||
loop: false,
|
||||
// false = infinite
|
||||
loopCount: false,
|
||||
// show cursor
|
||||
showCursor: true,
|
||||
// character for cursor
|
||||
cursorChar: "|",
|
||||
// attribute to type (null == text)
|
||||
attr: null,
|
||||
// either html or text
|
||||
contentType: 'html',
|
||||
// call when done callback function
|
||||
callback: function() {},
|
||||
// starting callback function before each string
|
||||
preStringTyped: function() {},
|
||||
// ending callback function
|
||||
callback: function(){ null },
|
||||
//callback for every typed string
|
||||
onStringTyped: function() {},
|
||||
// callback for reset
|
||||
resetCallback: function() {}
|
||||
};
|
||||
onStringTyped: function(){ null }
|
||||
}
|
||||
|
||||
|
||||
}(window, document, window.jQuery);
|
||||
}(window.jQuery);
|
||||
@ -1,33 +1,16 @@
|
||||
var retrys = 0;
|
||||
|
||||
var WSPort = 8081;
|
||||
var IP = (location.host +"").split(":")[0];
|
||||
var ip = localStorage.getItem("ip");
|
||||
var WSPort = 8080;
|
||||
var isWebsocketConnected = false;
|
||||
var connTimer = null;
|
||||
var sounds = true;
|
||||
var ws;
|
||||
var display = true;
|
||||
var audio = null;
|
||||
var serverSound = true;
|
||||
var isFinalMode = false;
|
||||
var player2 = false;
|
||||
var runde = 1;
|
||||
|
||||
var viewOnly = false;
|
||||
if(window.location.href.indexOf("viewonly")!==-1) {
|
||||
ip = window.location.href.split("ip=")[1];
|
||||
viewOnly = true;
|
||||
}
|
||||
var serverSound = false;
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#displayBtn").click(function() {
|
||||
if (this.requestFullScreen) {
|
||||
this.requestFullScreen();
|
||||
} else if (this.mozRequestFullScreen) {
|
||||
this.mozRequestFullScreen();
|
||||
} else if (this.webkitRequestFullScreen) {
|
||||
this.webkitRequestFullScreen();
|
||||
}
|
||||
$("#startDiv").hide();
|
||||
$("#display").show();
|
||||
$(".controller").hide();
|
||||
@ -40,23 +23,12 @@ $(document).ready(function() {
|
||||
$("#display").show();
|
||||
$(".controller").show();
|
||||
display = false;
|
||||
|
||||
// nice css manipulation 🤢#hack
|
||||
$(".mainHeight").css("width", 1020);
|
||||
$(".mainHeight").css("height", 520);
|
||||
$(".mainHeight").css("padding-top", "");
|
||||
$("#answers").css("font-size", "1.5em");
|
||||
$("#displayQuestions").css("font-size", "1.5em");
|
||||
});
|
||||
|
||||
$("#clearAllFailsBtn").click(function() {
|
||||
wsSend("clearAllFailsBtn", "");
|
||||
});
|
||||
|
||||
$("#showFinalScores").click(function() {
|
||||
wsSend("showFinalScores", "");
|
||||
});
|
||||
|
||||
$("#toggleSoundImg").click(function() {
|
||||
wsSend("toggleSound", "");
|
||||
});
|
||||
@ -76,20 +48,16 @@ $(document).ready(function() {
|
||||
});
|
||||
init_xmarker();
|
||||
connectWs();
|
||||
|
||||
if(viewOnly) {
|
||||
$("#displayBtn").click();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var connectWs = function() {
|
||||
ws = new WebSocket('ws://'+IP+':'+WSPort);
|
||||
ws = new WebSocket('ws://'+ip+':'+WSPort);
|
||||
|
||||
ws.onopen = function()
|
||||
{
|
||||
$("#notConnected").hide();
|
||||
$("#connected").text("Verbunden mit: "+'ws://'+IP+':'+WSPort);
|
||||
$("#connected").text("Verbunden mit: "+'ws://'+ip+':'+WSPort);
|
||||
$("#connected").show();
|
||||
isWebsocketConnected = true;
|
||||
loadQuestions();
|
||||
@ -104,29 +72,24 @@ var connectWs = function() {
|
||||
return null;
|
||||
}
|
||||
|
||||
ws.onmessage = async function (event) {
|
||||
console.log("msg: "+event.data.toString())
|
||||
let tempSt = event.data.toString();
|
||||
if(typeof(tempSt) != "string") {
|
||||
tempSt = await new Response(tempSt).text()
|
||||
}
|
||||
|
||||
messageParts_a = tempSt.split("###");
|
||||
ws.onmessage = function (event) {
|
||||
console.log("msg: "+event.data)
|
||||
messageParts_a = event.data.split("###");
|
||||
var key = messageParts_a[0];
|
||||
var value = messageParts_a[1];
|
||||
if(key =="setFail") {
|
||||
if($(".marker"+value).css("color") == "rgb(66, 66, 66)") {
|
||||
if($(".marker"+value).css("color") == "rgb(127, 115, 115)") {
|
||||
$(".marker"+value).css("color","rgb(211, 16, 16)");
|
||||
if(sounds && (display || serverSound)) {
|
||||
audio = new Audio('./sounds/fail.ogg');
|
||||
audio = new Audio('./sounds/fail.mp3');
|
||||
audio.play();
|
||||
}
|
||||
} else {
|
||||
$(".marker"+value).css("color","rgb(66, 66, 66)");
|
||||
$(".marker"+value).css("color","rgb(127, 115, 115)");
|
||||
}
|
||||
} else if(key == "clearAllFailsBtn") {
|
||||
$.each($(".xmarker").find("span"), function() {
|
||||
$(this).css("color","rgb(66, 66, 66)");
|
||||
$(this).css("color","rgb(127, 115, 115)");
|
||||
});
|
||||
} else if(key == "toggleSound") {
|
||||
if(sounds) {
|
||||
@ -138,12 +101,10 @@ var connectWs = function() {
|
||||
$("#toggleSoundImg").attr("src", "./img/soundOn.png");
|
||||
sounds = true;
|
||||
}
|
||||
} else if(key == "showFinalScores") {
|
||||
showFinalScores()
|
||||
} else if(key == "file") {
|
||||
if(value == "fragen.txt") {
|
||||
try {
|
||||
var base64 = decodeURIComponent(atob(messageParts_a[2]));
|
||||
var base64 = atob(messageParts_a[2]);
|
||||
fragen = JSON.parse(base64);
|
||||
fillFragenEditor();
|
||||
fillFragenSelect();
|
||||
@ -152,7 +113,6 @@ var connectWs = function() {
|
||||
}
|
||||
}
|
||||
} else if(key == "loadQuestion") {
|
||||
if(!(display && isFinalMode))
|
||||
loadQuestionToGui(value);
|
||||
} else if(key == "setAnswer") {
|
||||
setAnswer(value, messageParts_a[2]);
|
||||
@ -170,22 +130,14 @@ var connectWs = function() {
|
||||
setLeftPoints(value);
|
||||
} else if(key == "setRightPoints") {
|
||||
setRightPoints(value);
|
||||
} else if(key == "setSumRes") {
|
||||
setSumRes(value);
|
||||
} else if(key == "startAnswerFail") {
|
||||
startAnswerFail();
|
||||
} else if(key == "startAnswerDuplicate") {
|
||||
startAnswerDuplicate();
|
||||
} else if(key == "showTimer") {
|
||||
showTimer();
|
||||
} else if(key == "startTimer") {
|
||||
startTimer();
|
||||
} else if(key == "stopTimer") {
|
||||
stopTimer();
|
||||
} else if(key == "setAnswerFailVolume") {
|
||||
answerFailVolume = value;
|
||||
if(answerFail != null)
|
||||
answerFail.volume = answerFailVolume;
|
||||
} else if(key == "startJeopardy") {
|
||||
startJeopardy();
|
||||
} else if(key == "stopJeopardy") {
|
||||
stopJeopardy();
|
||||
} else if(key == "setJeopardyVolume") {
|
||||
jeopardyVolume = value;
|
||||
if(jeopardy != null)
|
||||
jeopardy.volume = jeopardyVolume;
|
||||
} else if(key == "startSchweinchen") {
|
||||
startSchweinchen();
|
||||
} else if(key == "stopSchweinchen") {
|
||||
@ -196,22 +148,8 @@ var connectWs = function() {
|
||||
schweinchen.volume = schweinchenVolume;
|
||||
} else if(key == "toggleBlackScreen") {
|
||||
if(display) {
|
||||
if ($("#blackScreen").css("display") === "none") {
|
||||
$("#blackScreen").fadeIn(500);
|
||||
} else {
|
||||
$("#blackScreen").fadeOut(6000);
|
||||
$("#blackScreen").toggle();
|
||||
}
|
||||
// $("#blackScreen").toggle();
|
||||
}
|
||||
} else if (key == "toggleFinalMode"){
|
||||
setFinalMode(value);
|
||||
}
|
||||
else if (key == "setPlayer2ForFinalMode"){
|
||||
setPlayer2(value);
|
||||
}
|
||||
else if (key == "setRunde"){
|
||||
console.log('Set Runde to ' + value);
|
||||
setRunde(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
BIN
web/sounds/fail.mp3
Normal file
BIN
web/sounds/fail.mp3
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/sounds/failOrginal.mp3
Normal file
BIN
web/sounds/failOrginal.mp3
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
web/sounds/fail_old.mp3
Normal file
BIN
web/sounds/fail_old.mp3
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/sounds/intro.mp3
Normal file
BIN
web/sounds/intro.mp3
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/sounds/jeopardy.mp3
Normal file
BIN
web/sounds/jeopardy.mp3
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/sounds/schweinchen.wav
Normal file
BIN
web/sounds/schweinchen.wav
Normal file
Binary file not shown.
BIN
web/sounds/textRichtig.mp3
Normal file
BIN
web/sounds/textRichtig.mp3
Normal file
Binary file not shown.
Binary file not shown.
BIN
web/sounds/zahlRichtig.mp3
Normal file
BIN
web/sounds/zahlRichtig.mp3
Normal file
Binary file not shown.
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user