Compare commits
5 Commits
db73585839
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
01759611fd | ||
|
|
cc3a5984e8 | ||
|
|
ae5c506154 | ||
| 6151379f81 | |||
|
|
7ffb9dcac4 |
@@ -53,27 +53,9 @@
|
|||||||
|
|
||||||
.hinweise { max-width: 340px; flex: 1; max-height: 560px; overflow-y: auto; }
|
.hinweise { max-width: 340px; flex: 1; max-height: 560px; overflow-y: auto; }
|
||||||
.hw { font-size: 11px; font-weight: bold; border-bottom: 1px solid #000; margin: 8px 0 3px; text-transform: uppercase; }
|
.hw { font-size: 11px; font-weight: bold; border-bottom: 1px solid #000; margin: 8px 0 3px; text-transform: uppercase; }
|
||||||
.h { display: flex; gap: 4px; font-size: 11px; line-height: 1.5; cursor: pointer; padding: 1px 3px; }
|
.h { display: flex; gap: 4px; font-size: 11px; line-height: 1.5; padding: 1px 3px; }
|
||||||
.h:hover { background: #eef3fb; }
|
|
||||||
.h.aktiv { background: #c5ddf7; }
|
|
||||||
.h.erledigt { color: #aaa; text-decoration: line-through; }
|
|
||||||
.hnum { min-width: 20px; flex-shrink: 0; font-weight: bold; color: #666; }
|
.hnum { min-width: 20px; flex-shrink: 0; font-weight: bold; color: #666; }
|
||||||
|
|
||||||
#toast {
|
|
||||||
position: fixed; top: 12px; left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50px);
|
|
||||||
background: #222; color: #fff;
|
|
||||||
font-size: 11px; padding: 5px 14px;
|
|
||||||
opacity: 0; transition: transform .2s, opacity .2s;
|
|
||||||
pointer-events: none; z-index: 99;
|
|
||||||
}
|
|
||||||
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
|
|
||||||
|
|
||||||
@keyframes fja { 0%, 60% { background: #27ae60 } 100% { background: #b8f0c8 } }
|
|
||||||
@keyframes fnein { 0%, 60% { background: #c0392b } 100% { background: #f0b8b8 } }
|
|
||||||
.fja { animation: fja .6s ease forwards; }
|
|
||||||
.fnein { animation: fnein .6s ease forwards; }
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -104,12 +86,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="hinweise" id="hinweise"></div>
|
<div class="hinweise" id="hinweise"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="toast"><span id="tw"></span><span id="tm"></span></div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let richtung='across', ar=-1, ac=-1;
|
let richtung='across', ar=-1, ac=-1;
|
||||||
let felder=[], nummern={across:{},down:{}};
|
let felder=[], nummern={across:{},down:{}};
|
||||||
let lsg, ha, hd, gelo={across:new Set(),down:new Set()};
|
let lsg, ha, hd;
|
||||||
let GR=13;
|
let GR=13;
|
||||||
|
|
||||||
const RAETSEL=[
|
const RAETSEL=[
|
||||||
@@ -157,7 +137,6 @@ function lade(idx) {
|
|||||||
setRichtung('across'); ar = -1; ac = -1;
|
setRichtung('across'); ar = -1; ac = -1;
|
||||||
felder = Array.from({length: GR}, () => Array(GR).fill(null));
|
felder = Array.from({length: GR}, () => Array(GR).fill(null));
|
||||||
nummern = {across: {}, down: {}};
|
nummern = {across: {}, down: {}};
|
||||||
gelo = {across: new Set(), down: new Set()};
|
|
||||||
document.getElementById('grid').style.gridTemplateColumns = `repeat(${GR},26px)`;
|
document.getElementById('grid').style.gridTemplateColumns = `repeat(${GR},26px)`;
|
||||||
document.getElementById('info').textContent = '';
|
document.getElementById('info').textContent = '';
|
||||||
bauGrid();
|
bauGrid();
|
||||||
@@ -212,7 +191,6 @@ function bauHinweise() {
|
|||||||
const row = document.createElement('div');
|
const row = document.createElement('div');
|
||||||
row.className = 'h'; row.id = `h${d[0]}${num}`;
|
row.className = 'h'; row.id = `h${d[0]}${num}`;
|
||||||
row.innerHTML = `<span class="hnum">${num}.</span><span>${clues[num]}</span>`;
|
row.innerHTML = `<span class="hnum">${num}.</span><span>${clues[num]}</span>`;
|
||||||
row.addEventListener('click', () => springZu(d, num));
|
|
||||||
p.appendChild(row);
|
p.appendChild(row);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -230,16 +208,7 @@ function zeigeAuswahl(r, c) {
|
|||||||
for (let i=0; i<GR; i++) for (let j=0; j<GR; j++) { const d=felder[i][j]; if(d&&!d.bl) d.el.classList.remove('markiert','aktiv'); }
|
for (let i=0; i<GR; i++) for (let j=0; j<GR; j++) { const d=felder[i][j]; if(d&&!d.bl) d.el.classList.remove('markiert','aktiv'); }
|
||||||
wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('markiert'));
|
wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('markiert'));
|
||||||
if (felder[r]?.[c] && !felder[r][c].bl) felder[r][c].el.classList.add('aktiv');
|
if (felder[r]?.[c] && !felder[r][c].bl) felder[r][c].el.classList.add('aktiv');
|
||||||
document.querySelectorAll('.h').forEach(e => e.classList.remove('aktiv'));
|
|
||||||
if (!wc.length) return;
|
|
||||||
const [sr,sc] = wc[0], map = richtung==='across' ? nummern.across : nummern.down;
|
|
||||||
for (const [num, pos] of Object.entries(map)) {
|
|
||||||
if (pos.r===sr && pos.c===sc) {
|
|
||||||
const el = document.getElementById(`h${richtung[0]}${num}`);
|
|
||||||
if (el) { el.classList.add('aktiv'); el.scrollIntoView({block:'nearest', behavior:'smooth'}); }
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function fokus(r, c) { ar=r; ac=c; zeigeAuswahl(r, c); }
|
function fokus(r, c) { ar=r; ac=c; zeigeAuswahl(r, c); }
|
||||||
@@ -259,10 +228,9 @@ function eingabe(r, c) {
|
|||||||
const d = felder[r][c];
|
const d = felder[r][c];
|
||||||
if (!d.inp.value.length) return;
|
if (!d.inp.value.length) return;
|
||||||
d.inp.value = d.inp.value.slice(-1).toUpperCase();
|
d.inp.value = d.inp.value.slice(-1).toUpperCase();
|
||||||
d.el.classList.remove('richtig','falsch','fja','fnein');
|
d.el.classList.remove('richtig','falsch');
|
||||||
const wc = wort(r,c,richtung), idx = wc.findIndex(([wr,wc2]) => wr===r && wc2===c);
|
const wc = wort(r,c,richtung), idx = wc.findIndex(([wr,wc2]) => wr===r && wc2===c);
|
||||||
if (idx !== -1 && idx < wc.length-1) felder[wc[idx+1][0]][wc[idx+1][1]].inp.focus();
|
if (idx !== -1 && idx < wc.length-1) felder[wc[idx+1][0]][wc[idx+1][1]].inp.focus();
|
||||||
setTimeout(() => wortCheck(r,c), 50);
|
|
||||||
}
|
}
|
||||||
function geh(r, c, dr, dc) {
|
function geh(r, c, dr, dc) {
|
||||||
const nr=r+dr, nc=c+dc;
|
const nr=r+dr, nc=c+dc;
|
||||||
@@ -277,21 +245,9 @@ function naechstesWort(delta) {
|
|||||||
const keys = Object.keys(map).map(Number).sort((a,b) => a-b);
|
const keys = Object.keys(map).map(Number).sort((a,b) => a-b);
|
||||||
const [sr,sc] = wort(ar,ac,richtung)[0];
|
const [sr,sc] = wort(ar,ac,richtung)[0];
|
||||||
const cur = keys.find(n => map[n].r===sr && map[n].c===sc);
|
const cur = keys.find(n => map[n].r===sr && map[n].c===sc);
|
||||||
springZu(richtung, keys[((keys.indexOf(cur)+delta)+keys.length) % keys.length]);
|
const next = keys[((keys.indexOf(cur)+delta)+keys.length) % keys.length];
|
||||||
}
|
setRichtung(richtung);
|
||||||
function springZu(d, num) {
|
felder[map[next].r][map[next].c].inp.focus();
|
||||||
setRichtung(d);
|
|
||||||
const map = d==='across' ? nummern.across : nummern.down;
|
|
||||||
if (map[num]) felder[map[num].r][map[num].c].inp.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
let tt = null;
|
|
||||||
function toast(word, ok) {
|
|
||||||
const t = document.getElementById('toast');
|
|
||||||
t.innerHTML = `<span style="color:${ok?'#7df0a0':'#f07070'};font-weight:bold;margin-right:3px">${word}</span>${ok?' ✓ Richtig!':' ✗ Falsch'}`;
|
|
||||||
t.classList.add('show');
|
|
||||||
if (tt) clearTimeout(tt);
|
|
||||||
tt = setTimeout(() => t.classList.remove('show'), 1800);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function alleFelder(fn) {
|
function alleFelder(fn) {
|
||||||
@@ -300,32 +256,10 @@ function alleFelder(fn) {
|
|||||||
fn(d, r, c);
|
fn(d, r, c);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function wortCheck(r, c) {
|
|
||||||
['across','down'].forEach(d => {
|
|
||||||
const wc = wort(r,c,d); if (wc.length < 2) return;
|
|
||||||
if (!wc.every(([wr,wc2]) => felder[wr]?.[wc2]?.inp?.value?.trim())) return;
|
|
||||||
const map = d==='across' ? nummern.across : nummern.down;
|
|
||||||
const [sr,sc] = wc[0]; let num = null;
|
|
||||||
for (const [n,pos] of Object.entries(map)) if (pos.r===sr && pos.c===sc) { num=+n; break; }
|
|
||||||
if (num === null) return;
|
|
||||||
const ist = wc.map(([wr,wc2]) => felder[wr][wc2].inp.value.toUpperCase()).join('');
|
|
||||||
const soll = wc.map(([wr,wc2]) => lsg[`${wr},${wc2}`]||'').join('');
|
|
||||||
const ok = ist === soll;
|
|
||||||
wc.forEach(([wr,wc2]) => { const cel=felder[wr][wc2].el; cel.classList.remove('fja','fnein','richtig','falsch'); void cel.offsetWidth; });
|
|
||||||
if (ok) {
|
|
||||||
wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('fja','richtig'));
|
|
||||||
document.getElementById(`h${d[0]}${num}`)?.classList.add('erledigt');
|
|
||||||
gelo[d].add(num); toast(ist, true);
|
|
||||||
} else if (!gelo[d].has(num)) {
|
|
||||||
wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('fnein','falsch'));
|
|
||||||
toast(ist, false);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function pruefen() {
|
function pruefen() {
|
||||||
let ok=0, ng=0, em=0;
|
let ok=0, ng=0, em=0;
|
||||||
alleFelder((d,r,c) => {
|
alleFelder((d,r,c) => {
|
||||||
d.el.classList.remove('richtig','falsch','fja','fnein');
|
d.el.classList.remove('richtig','falsch');
|
||||||
const v=d.inp.value.toUpperCase(), s=lsg[`${r},${c}`];
|
const v=d.inp.value.toUpperCase(), s=lsg[`${r},${c}`];
|
||||||
if (!v) { em++; return; }
|
if (!v) { em++; return; }
|
||||||
if (v===s) { d.el.classList.add('richtig'); ok++; } else { d.el.classList.add('falsch'); ng++; }
|
if (v===s) { d.el.classList.add('richtig'); ok++; } else { d.el.classList.add('falsch'); ng++; }
|
||||||
@@ -337,15 +271,13 @@ function pruefen() {
|
|||||||
function loesung() {
|
function loesung() {
|
||||||
alleFelder((d,r,c) => {
|
alleFelder((d,r,c) => {
|
||||||
const s = lsg[`${r},${c}`];
|
const s = lsg[`${r},${c}`];
|
||||||
if (s) { d.inp.value=s; d.el.classList.remove('falsch','fnein'); d.el.classList.add('richtig'); }
|
if (s) { d.inp.value=s; d.el.classList.remove('falsch'); d.el.classList.add('richtig'); }
|
||||||
});
|
});
|
||||||
document.getElementById('info').textContent='Lösung angezeigt.'; document.getElementById('info').className='gut';
|
document.getElementById('info').textContent='Lösung angezeigt.'; document.getElementById('info').className='gut';
|
||||||
}
|
}
|
||||||
function loeschen() {
|
function loeschen() {
|
||||||
alleFelder(d => { d.inp.value=''; d.el.classList.remove('richtig','falsch','fja','fnein'); });
|
alleFelder(d => { d.inp.value=''; d.el.classList.remove('richtig','falsch'); });
|
||||||
gelo = {across: new Set(), down: new Set()};
|
|
||||||
document.getElementById('info').textContent='';
|
document.getElementById('info').textContent='';
|
||||||
document.querySelectorAll('.h.erledigt').forEach(e => e.classList.remove('erledigt'));
|
|
||||||
}
|
}
|
||||||
lade(0);
|
lade(0);
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -25,14 +25,14 @@
|
|||||||
<p>Wörter lernen</p>
|
<p>Wörter lernen</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="game-card" onclick="location.href='Abdelaziz/CrossWords.html'">
|
<div class="game-card" onclick="location.href='Abdelaziz/kreuzwortratsel.html'">
|
||||||
<h2>CrossWord</h2>
|
<h2>CrossWord</h2>
|
||||||
<p>Abdelaziz</p>
|
<p>Abdelaziz</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="game-card" onclick="location.href='member5/game.html'">
|
<div class="game-card" onclick="location.href='ismail/index.html'">
|
||||||
<h2>Game 5</h2>
|
<h2>Game 5</h2>
|
||||||
<p>Member 5</p>
|
<p>Mathematik lernen</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
96
MainPage/ismail/index.html
Normal file
96
MainPage/ismail/index.html
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Mathematik Lernen</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<h1>Mathematik Lernen</h1>
|
||||||
|
|
||||||
|
<div id="setup">
|
||||||
|
|
||||||
|
<h2>Was willst du üben?</h2>
|
||||||
|
|
||||||
|
<div class="mode">
|
||||||
|
<button id="btn-addition" onclick="waehleMode('addition', this)">Addition</button>
|
||||||
|
<button id="btn-subtraktion" onclick="waehleMode('subtraktion', this)">Subtraktion</button>
|
||||||
|
<button id="btn-multiplikation" onclick="waehleMode('multiplikation', this)">Multiplikation</button>
|
||||||
|
<button id="btn-mix" onclick="waehleAlle()">Mix</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Wie schwer?</h2>
|
||||||
|
|
||||||
|
<div class="level">
|
||||||
|
<button onclick="waehleLevel('leicht', this)">Leicht (1-10)</button>
|
||||||
|
<button onclick="waehleLevel('mittel', this)">Mittel (1-50)</button>
|
||||||
|
<button onclick="waehleLevel('schwer', this)">Schwer (1-100)</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Wie viele Fragen?</h2>
|
||||||
|
|
||||||
|
<div class="anzahl">
|
||||||
|
<button onclick="waehleAnzahl(5, this)">5</button>
|
||||||
|
<button onclick="waehleAnzahl(10, this)">10</button>
|
||||||
|
<button onclick="waehleAnzahl(15, this)">15</button>
|
||||||
|
<button onclick="waehleAnzahl(20, this)">20</button>
|
||||||
|
<button onclick="waehleAnzahl(30, this)">30</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="fehler"></p>
|
||||||
|
|
||||||
|
<button id="start-button" onclick="spielStarten()">▶ Starten!</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="spiel">
|
||||||
|
|
||||||
|
<p id="fortschritt-text"></p>
|
||||||
|
<p id="timer"></p>
|
||||||
|
|
||||||
|
<div class="question-box">
|
||||||
|
|
||||||
|
<h2 id="question"></h2>
|
||||||
|
|
||||||
|
<input type="number" id="answer" placeholder="Deine Antwort">
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button onclick="checkAnswer()">Überprüfen</button>
|
||||||
|
|
||||||
|
<p id="result"></p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="score">
|
||||||
|
Punktzahl: <span id="score">0</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="endscreen">
|
||||||
|
|
||||||
|
<h2 id="end-titel"></h2>
|
||||||
|
|
||||||
|
<div id="prozent"></div>
|
||||||
|
|
||||||
|
<p id="end-text"></p>
|
||||||
|
|
||||||
|
<p>Richtig: <b id="end-richtig"></b></p>
|
||||||
|
|
||||||
|
<p>Falsch: <b id="end-falsch"></b></p>
|
||||||
|
|
||||||
|
<button id="nochmal-button" onclick="nochmal()">Nochmal spielen</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
284
MainPage/ismail/script.js
Normal file
284
MainPage/ismail/script.js
Normal file
@@ -0,0 +1,284 @@
|
|||||||
|
let num1
|
||||||
|
let num2
|
||||||
|
let correctAnswer
|
||||||
|
let score=0
|
||||||
|
let currentMode=""
|
||||||
|
|
||||||
|
let gewaehlteModes=[]
|
||||||
|
let gewaehltesLevel=""
|
||||||
|
let gewaehltAnzahl=0
|
||||||
|
|
||||||
|
let aktFrage=0
|
||||||
|
let richtigAnzahl=0
|
||||||
|
let falschAnzahl=0
|
||||||
|
|
||||||
|
let timerZahl=15
|
||||||
|
let timerInterval
|
||||||
|
|
||||||
|
let gesperrt=false
|
||||||
|
|
||||||
|
function waehleMode(mode,btn){
|
||||||
|
|
||||||
|
let index=gewaehlteModes.indexOf(mode)
|
||||||
|
|
||||||
|
if(index==-1){
|
||||||
|
gewaehlteModes.push(mode)
|
||||||
|
btn.classList.add("aktiv")
|
||||||
|
}else{
|
||||||
|
gewaehlteModes.splice(index,1)
|
||||||
|
btn.classList.remove("aktiv")
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("btn-mix").classList.remove("aktiv")
|
||||||
|
}
|
||||||
|
|
||||||
|
function waehleAlle(){
|
||||||
|
|
||||||
|
gewaehlteModes=["addition","subtraktion","multiplikation"]
|
||||||
|
|
||||||
|
document.getElementById("btn-addition").classList.add("aktiv")
|
||||||
|
document.getElementById("btn-subtraktion").classList.add("aktiv")
|
||||||
|
document.getElementById("btn-multiplikation").classList.add("aktiv")
|
||||||
|
document.getElementById("btn-mix").classList.add("aktiv")
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function waehleLevel(level,btn){
|
||||||
|
|
||||||
|
gewaehltesLevel=level
|
||||||
|
|
||||||
|
let alleLevel=document.querySelectorAll(".level button")
|
||||||
|
|
||||||
|
for(let i=0;i<alleLevel.length;i++){
|
||||||
|
alleLevel[i].classList.remove("aktiv")
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.classList.add("aktiv")
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function waehleAnzahl(anzahl,btn){
|
||||||
|
|
||||||
|
gewaehltAnzahl=anzahl
|
||||||
|
|
||||||
|
let alleAnzahl=document.querySelectorAll(".anzahl button")
|
||||||
|
|
||||||
|
for(let i=0;i<alleAnzahl.length;i++){
|
||||||
|
alleAnzahl[i].classList.remove("aktiv")
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.classList.add("aktiv")
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function spielStarten(){
|
||||||
|
|
||||||
|
if(gewaehlteModes.length==0){
|
||||||
|
document.getElementById("fehler").textContent="Bitte eine Rechenart wählen"
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if(gewaehltesLevel==""){
|
||||||
|
document.getElementById("fehler").textContent="Bitte eine Schwierigkeit wählen"
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if(gewaehltAnzahl==0){
|
||||||
|
document.getElementById("fehler").textContent="Bitte Anzahl Fragen wählen"
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
score=0
|
||||||
|
aktFrage=0
|
||||||
|
richtigAnzahl=0
|
||||||
|
falschAnzahl=0
|
||||||
|
|
||||||
|
document.getElementById("score").textContent=0
|
||||||
|
|
||||||
|
document.getElementById("setup").style.display="none"
|
||||||
|
document.getElementById("spiel").style.display="block"
|
||||||
|
document.getElementById("endscreen").style.display="none"
|
||||||
|
|
||||||
|
generateQuestion()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateQuestion(){
|
||||||
|
|
||||||
|
gesperrt=false
|
||||||
|
|
||||||
|
aktFrage++
|
||||||
|
|
||||||
|
document.getElementById("fortschritt-text").textContent="Frage "+aktFrage+" von "+gewaehltAnzahl
|
||||||
|
|
||||||
|
let zufallIndex=Math.floor(Math.random()*gewaehlteModes.length)
|
||||||
|
|
||||||
|
currentMode=gewaehlteModes[zufallIndex]
|
||||||
|
|
||||||
|
let maxZahl=10
|
||||||
|
|
||||||
|
if(gewaehltesLevel=="mittel")maxZahl=50
|
||||||
|
if(gewaehltesLevel=="schwer")maxZahl=100
|
||||||
|
|
||||||
|
num1=Math.floor(Math.random()*maxZahl)+1
|
||||||
|
num2=Math.floor(Math.random()*maxZahl)+1
|
||||||
|
|
||||||
|
if(currentMode==="addition"){
|
||||||
|
correctAnswer=num1+num2
|
||||||
|
document.getElementById("question").textContent=num1+" + "+num2+" = ?"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(currentMode==="subtraktion"){
|
||||||
|
|
||||||
|
if(num2>num1){
|
||||||
|
let temp=num1
|
||||||
|
num1=num2
|
||||||
|
num2=temp
|
||||||
|
}
|
||||||
|
|
||||||
|
correctAnswer=num1-num2
|
||||||
|
document.getElementById("question").textContent=num1+" - "+num2+" = ?"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(currentMode==="multiplikation"){
|
||||||
|
correctAnswer=num1*num2
|
||||||
|
document.getElementById("question").textContent=num1+" × "+num2+" = ?"
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("answer").value=""
|
||||||
|
document.getElementById("result").textContent=""
|
||||||
|
document.getElementById("answer").focus()
|
||||||
|
|
||||||
|
timerStarten()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function timerStarten(){
|
||||||
|
|
||||||
|
clearInterval(timerInterval)
|
||||||
|
|
||||||
|
timerZahl=15
|
||||||
|
|
||||||
|
document.getElementById("timer").textContent="Zeit: "+timerZahl
|
||||||
|
document.getElementById("timer").style.color="green"
|
||||||
|
|
||||||
|
timerInterval=setInterval(function(){
|
||||||
|
|
||||||
|
timerZahl--
|
||||||
|
|
||||||
|
document.getElementById("timer").textContent="Zeit: "+timerZahl
|
||||||
|
|
||||||
|
if(timerZahl<=5){
|
||||||
|
document.getElementById("timer").style.color="red"
|
||||||
|
}
|
||||||
|
|
||||||
|
if(timerZahl<=0){
|
||||||
|
clearInterval(timerInterval)
|
||||||
|
zeitAbgelaufen()
|
||||||
|
}
|
||||||
|
|
||||||
|
},1000)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function zeitAbgelaufen(){
|
||||||
|
|
||||||
|
if(gesperrt)return
|
||||||
|
|
||||||
|
gesperrt=true
|
||||||
|
|
||||||
|
falschAnzahl++
|
||||||
|
|
||||||
|
document.getElementById("result").textContent="Zeit abgelaufen! Richtig wäre: "+correctAnswer
|
||||||
|
document.getElementById("result").style.color="orange"
|
||||||
|
|
||||||
|
setTimeout(naechsteOderEnde,2000)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkAnswer(){
|
||||||
|
|
||||||
|
if(gesperrt)return
|
||||||
|
|
||||||
|
let userAnswer=Number(document.getElementById("answer").value)
|
||||||
|
|
||||||
|
if(document.getElementById("answer").value=="")return
|
||||||
|
|
||||||
|
clearInterval(timerInterval)
|
||||||
|
|
||||||
|
gesperrt=true
|
||||||
|
|
||||||
|
let resultText=document.getElementById("result")
|
||||||
|
|
||||||
|
if(userAnswer===correctAnswer){
|
||||||
|
|
||||||
|
resultText.textContent="Richtig! Antwort: "+correctAnswer
|
||||||
|
resultText.style.color="green"
|
||||||
|
|
||||||
|
score++
|
||||||
|
richtigAnzahl++
|
||||||
|
|
||||||
|
document.getElementById("score").textContent=score
|
||||||
|
|
||||||
|
}else{
|
||||||
|
|
||||||
|
resultText.textContent="Falsch! Richtige Antwort: "+correctAnswer
|
||||||
|
resultText.style.color="red"
|
||||||
|
|
||||||
|
falschAnzahl++
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(naechsteOderEnde,2000)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function naechsteOderEnde(){
|
||||||
|
|
||||||
|
if(aktFrage>=gewaehltAnzahl){
|
||||||
|
spielEnde()
|
||||||
|
}else{
|
||||||
|
generateQuestion()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function spielEnde(){
|
||||||
|
|
||||||
|
clearInterval(timerInterval)
|
||||||
|
|
||||||
|
document.getElementById("spiel").style.display="none"
|
||||||
|
document.getElementById("endscreen").style.display="block"
|
||||||
|
|
||||||
|
let prozent=Math.round((richtigAnzahl/gewaehltAnzahl)*100)
|
||||||
|
|
||||||
|
document.getElementById("prozent").textContent=prozent+"%"
|
||||||
|
document.getElementById("end-richtig").textContent=richtigAnzahl
|
||||||
|
document.getElementById("end-falsch").textContent=falschAnzahl
|
||||||
|
document.getElementById("end-text").textContent="Du hast "+richtigAnzahl+" von "+gewaehltAnzahl+" richtig"
|
||||||
|
|
||||||
|
if(prozent==100){
|
||||||
|
document.getElementById("end-titel").textContent="Perfekt"
|
||||||
|
document.getElementById("prozent").style.color="gold"
|
||||||
|
}
|
||||||
|
else if(prozent>=70){
|
||||||
|
document.getElementById("end-titel").textContent="Sehr gut"
|
||||||
|
document.getElementById("prozent").style.color="green"
|
||||||
|
}
|
||||||
|
else if(prozent>=50){
|
||||||
|
document.getElementById("end-titel").textContent="Gut gemacht"
|
||||||
|
document.getElementById("prozent").style.color="orange"
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.getElementById("end-titel").textContent="Weiter üben"
|
||||||
|
document.getElementById("prozent").style.color="red"
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function nochmal(){
|
||||||
|
|
||||||
|
document.getElementById("endscreen").style.display="none"
|
||||||
|
document.getElementById("setup").style.display="block"
|
||||||
|
|
||||||
|
}
|
||||||
146
MainPage/ismail/style.css
Normal file
146
MainPage/ismail/style.css
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
body{
|
||||||
|
font-family:Arial,sans-serif;
|
||||||
|
background:#f0f8ff;
|
||||||
|
text-align:center;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
margin-top:40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,h2{
|
||||||
|
color:#333;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
padding:10px 20px;
|
||||||
|
margin:5px;
|
||||||
|
border:none;
|
||||||
|
border-radius:8px;
|
||||||
|
background:greenyellow;
|
||||||
|
color:white;
|
||||||
|
cursor:pointer;
|
||||||
|
font-size:16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover{
|
||||||
|
background:greenyellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode button{
|
||||||
|
background:green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mode button.aktiv{
|
||||||
|
background:#1a7a1e;
|
||||||
|
border:3px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level button{
|
||||||
|
background:#2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level button:hover{
|
||||||
|
background:blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level button.aktiv{
|
||||||
|
background:darkblue;
|
||||||
|
border:3px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anzahl button{
|
||||||
|
background:orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anzahl button:hover{
|
||||||
|
background:orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anzahl button.aktiv{
|
||||||
|
background:brown;
|
||||||
|
border:3px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#start-button{
|
||||||
|
background:red;
|
||||||
|
font-size:18px;
|
||||||
|
padding:12px 30px;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#start-button:hover{
|
||||||
|
background:red;
|
||||||
|
}
|
||||||
|
|
||||||
|
input{
|
||||||
|
padding:10px;
|
||||||
|
font-size:16px;
|
||||||
|
width:150px;
|
||||||
|
margin-top:10px;
|
||||||
|
border:2px solid gray;
|
||||||
|
border-radius:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-box{
|
||||||
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score{
|
||||||
|
margin-top:20px;
|
||||||
|
font-size:20px;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#timer{
|
||||||
|
font-size:22px;
|
||||||
|
font-weight:bold;
|
||||||
|
color:green;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result{
|
||||||
|
font-size:18px;
|
||||||
|
font-weight:bold;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fortschritt-text{
|
||||||
|
font-size:16px;
|
||||||
|
color:gray;
|
||||||
|
margin-top:5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#endscreen{
|
||||||
|
display:none;
|
||||||
|
margin-top:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#prozent{
|
||||||
|
font-size:52px;
|
||||||
|
font-weight:bold;
|
||||||
|
color:green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nochmal-button{
|
||||||
|
background:green;
|
||||||
|
font-size:18px;
|
||||||
|
padding:12px 28px;
|
||||||
|
margin-top:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#setup{
|
||||||
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spiel{
|
||||||
|
display:none;
|
||||||
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fehler{
|
||||||
|
color:red;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user