FüUF26 Prüfungsmodus hinzugefügt
parent
aa8d9529dc
commit
1d07ab2672
|
|
@ -15,6 +15,7 @@ import RandomQuest from './pages/Train/RandomQuest/RandomQuest'
|
|||
import RandomExam from './pages/Train/RandomExam/RandomExam'
|
||||
import CategoryQuest from './pages/Train/CategoryQuest/CategoryQuest'
|
||||
import CategorySelect from './pages/Train/Home/CategorySelect'
|
||||
import FUEUF26_RandomExam from './pages/FUEUF26/RandomExam/FUEUF26_RandomExam'
|
||||
|
||||
import { generateUUID, getBrowser } from './main.js'
|
||||
|
||||
|
|
@ -58,6 +59,8 @@ export default function App() {
|
|||
<Route path="/train/categoryselect" component={CategorySelect} />
|
||||
<Route path="/train/categoryquest" component={CategoryQuest} />
|
||||
<Route path="/train*" component={Page404} />
|
||||
<Route path="/fueuf26/randomexam" component={FUEUF26_RandomExam} />
|
||||
<Route path="/fueuf26*" component={Page404} />
|
||||
|
||||
<Route path="/" component={Home} />
|
||||
<Route path="/*" component={Page404} />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,569 @@
|
|||
[
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.1",
|
||||
"question": "Welchem Bundesministerium ist die Bundesanstalt THW unterstellt?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Bundesministerium des Innern",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Bundesfeuerwehrministerium",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Bundesministerium f\u00fcr Bildung und Forschung",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.2",
|
||||
"question": "Wie können Behörden das Technische Hilfswerk anfordern?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Durch den Artikel 35 des GG (Amtshilfe)",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Durch den Artikel 73 (1) 1 des GG (ausschließliche Gesetzgebung des Bundes)",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Durch einen Beschluss des Bundespräsidenten",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.3",
|
||||
"question": "Ab wie vielen Einwohnern muss i.d.R eine Berufsfeuerwehr aufgebaut werden (Bayern)?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "100.000 Einwohner",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "20.000 Einwohner",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Es gibt keine feste Regel",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.4",
|
||||
"question": "In welchen Fällen kommt das THW laut THW-Gesetz Art 1 Abs 2 in den Einsatz? (* mehr als 3 Antwortmöglichkeiten möglich)",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Wenn die örtliche Gefahrenabwehr das THW im Großschadensfall anfordert",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Wenn das THW technische Hilfe nach dem Zivilschutz leistet",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Es liegt im Ermessen der Regionalstelle",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "D",
|
||||
"answer_option": "Wenn dies mit den zuständigen Stellen durch Vertrag vorher vereinbart wurde",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "E",
|
||||
"answer_option": "Automatisch wenn im Katastrophenfall eine TEL/ÖEL eingerichtet wird",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.5",
|
||||
"question": "Welches Gesetz regelt die Aufgaben des THW?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Wehrdienstgesetz",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "THW Gesetz",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Zivil- und Katastrophenhilfegesetz (ZSKG)",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.6",
|
||||
"question": "Wie heißen die drei Abschnitte einer Unterrichtseinheit?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Begrüßung, Gruppenarbeit, Vortrag",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Einleitung, Wiederholung, Feedback",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Einleitung, Hauptteil, Schluss",
|
||||
"correct": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.7",
|
||||
"question": "Welche Lernziele gibt es?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Richt-Lernziele",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Grob-Lernziele",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Fein-Lernziele",
|
||||
"correct": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.8",
|
||||
"question": "Wie wird ein Feedback richtig gegeben?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Start mit mind. 2 positivien Aspekten; Konkret formulieren; Konstruktiv geben",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Start mit allen negativen Aspekten; subjektive Meinung geben; max 1 positiver Aspekt",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Nicht konkret werden; offene Punkte nicht besprechen",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.9",
|
||||
"question": "Was merkt sich der Mensch am meisten?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Von dem was er selbst tut",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Von dem was er leistet",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Von dem was er sieht",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.10",
|
||||
"question": "Wie lautet die 4-Stufen Methode?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "abschreiben lassen; auswendig lernen; üben; vormachen lassen",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "motivieren; vormachen; nachmachen lassen; üben",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "üben; vormachen lassen; auswendig lernen; dokumentieren",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.11",
|
||||
"question": "Welcher Führungsstil eignet sich am besten im Einsatz/bei Einsatzübungen?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "der kooperative Führungsstil",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "der autoritäre Führungsstil",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "der laissez-faire Führungsstil",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.12",
|
||||
"question": "Aus welchen Säulen nach THW DV 1-100 besteht das Führungssystem des THW?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Planen, Bauen, Betreiben",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Führungsorganisation, Führungsvorgang, Führungsmittel",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Auftrag, Erkundung, Befehlsgebung",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.13",
|
||||
"question": "Welche Führungsstellen befinden sich in der mittleren Führungsebene?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "KatSL; SAE",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "ZTr; B1",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "EL; TEL; ÖEL",
|
||||
"correct": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.14",
|
||||
"question": "Was bedeutet führen?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Richtungsweisendes und steuerndes Einwirken; Zielbildung; Planung; Kontrolle",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Ohne Ziel seinen eigenen Standpunkt durchsetzen",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Anordnung ohne Ziel; Alle Aufträge an Unterstelle ohne Planung weitergeben",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.15",
|
||||
"question": "Wie lauten die einzelnen Punkte eines Befehls in der richtigen Reihenfolge?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Lage, Auftrag, Durchführung, Logistik, Führung und Verbindung",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Führung und Verbindung, Durchführung, Logistik, Auftrag, Lage",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Auftrag, Lage, Logistik, Führung und Verbindung, Durchführung",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.16",
|
||||
"question": "Wie lange ist ein Abschnitt von 2mm auf einer karte mit Maßstab 1:25.000 in Wirklichkeit? (* mehr als 3 Antwortmöglichkeiten möglich)",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "50m",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "500m",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "250m",
|
||||
"correct": false
|
||||
}
|
||||
],
|
||||
"moreanswers": [
|
||||
{
|
||||
"answer_id": "D",
|
||||
"answer_option": "25m",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.17",
|
||||
"question": "Auf wieviel Meter genau ist die Koordinate 32U MD 103507?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "10m",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "100m",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "1.000m",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.18",
|
||||
"question": "Welche Aufgabenbereiche hat ein/e Unterführer/in laut STAN?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Ausbildung; Führung im Einsatz; Ausstattung",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Führen im Übungsdienst; Fahren des Kraftfahrzeugs; Lagekarte führen",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Ausbildung der Zugführer; Ausstattung; Im Übungsdienst zuschauen",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.19",
|
||||
"question": "Wie lauten die Phasen des Führungsvorgangs im THW?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Erkundung (Lage,Planung); Entschluss (Befehl,Auftrag); Kontrolle",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Kontrolle (Auftrag,Entschluss); Lagefeststellung (Beurteilung,Planung); Befehlsgebung",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Lagefeststellung (Erkundung,Kontrolle); Planung (Beurteilung,Entschluss); Befehlsgebung",
|
||||
"correct": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.20",
|
||||
"question": "Wie heißt die Informationsweitergabe von unten nach oben?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Auftrag",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Meldung",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Beurteilung",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.21",
|
||||
"question": "Wie lautet das Gefahrenmerkschema im THW?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "AAAAA BCD EEEEE",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "EEEEE CDBU RRRR",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Es gibt kein bestimmtes Gefahrenmerkschema",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.22",
|
||||
"question": "Wann liegt eine akute Gefahr vor?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Wenn in einer Stunde die Gefahr nicht beseitigt ist",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Wenn Menschenleben direkt betroffen sind und sofort gehandelt werden muss",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Wenn mindestens 2 Bergungsgruppen beschäftigt sind",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.23",
|
||||
"question": "Welche Voraussetzungen nach den Artikeln 35 und 38 StVO müssen für ein Wegerecht erfüllt sein?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Blaulicht und Einsatzhorn einschalten und es muss höchste Eile geboten sein",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Wenn die Einsatzfahrzeuge blau sind und die Helfer Einsatzbekleidung tragen",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Es gibt keine genauen Voraussetzungen",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.24",
|
||||
"question": "Welche Körperschutzformen müssen alle Bergungsgruppen sicherstellen können?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Form I",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Form II",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Form III",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"category": "1",
|
||||
"question_id": "1.25",
|
||||
"question": "Was bedeutet ENT?",
|
||||
"answers": [
|
||||
{
|
||||
"answer_id": "A",
|
||||
"answer_option": "Einsatznachsorgeteam",
|
||||
"correct": true
|
||||
},
|
||||
{
|
||||
"answer_id": "B",
|
||||
"answer_option": "Einsatznachtanken",
|
||||
"correct": false
|
||||
},
|
||||
{
|
||||
"answer_id": "C",
|
||||
"answer_option": "Einheitennottransport",
|
||||
"correct": false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
import { React, useEffect, useState } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faXmark, faPeopleGroup, faHeadset, faScaleBalanced, faHome, faLinesLeaning, faGraduationCap } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faXmark, faPeopleGroup, faHeadset, faScaleBalanced, faHome, faLinesLeaning, faGraduationCap, faBookOpenReader } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
// import logo_breit from '../../assets/pictures/logos/GAT-Logo512.png'
|
||||
|
||||
|
|
@ -47,6 +47,10 @@ export default function MainMenu(props) {
|
|||
<FontAwesomeIcon className="mainmenutileicon" icon={faLinesLeaning} />
|
||||
Zufallsfragen
|
||||
</div>
|
||||
<div className="mainmenutile" onClick={() => { lP("/fueuf26/randomexam") }}>
|
||||
<FontAwesomeIcon className="mainmenutileicon" icon={faBookOpenReader} />
|
||||
FüUF26
|
||||
</div>
|
||||
</div>
|
||||
<h2 className='mainmenuh2'>Weiteres</h2>
|
||||
<div className="mainmenutilecont">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
.examendtext {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.successicon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
#successrestart {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.successcont {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.examendtext {
|
||||
width: 80vw;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
import { React, useState, useEffect } from 'react'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faThumbsUp, faThumbsDown, faCheck, faXmark } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
import MainHeader from '../../../components/MainHeader/MainHeader.js'
|
||||
import MainFooter from '../../../components/MainFooter/MainFooter.js'
|
||||
import CTAButton from '../../../components/CTAButton/CTAButton.js'
|
||||
|
||||
import jsondata from '../../../assets/fueuf26_questions.json'
|
||||
|
||||
import { lP, oP, sT } from '../../../main.js'
|
||||
|
||||
// import '../../../main.min.css'
|
||||
|
||||
import './FUEUF26_RandomExam.min.css'
|
||||
import './MFUEUF26_RandomExam.min.css'
|
||||
|
||||
var data = []
|
||||
|
||||
|
||||
export default function FUEUF26_RandomExam() {
|
||||
|
||||
var [loadedQuest, setLoadedQuest] = useState(1)
|
||||
|
||||
var [questText, setQuestText] = useState("")
|
||||
var [questData, setQuestData] = useState("")
|
||||
|
||||
var [answ1State, setAnsw1State] = useState(0)
|
||||
var [answ2State, setAnsw2State] = useState(0)
|
||||
var [answ3State, setAnsw3State] = useState(0)
|
||||
var [answ1Text, setAnsw1Text] = useState("")
|
||||
var [answ2Text, setAnsw2Text] = useState("")
|
||||
var [answ3Text, setAnsw3Text] = useState("")
|
||||
var [answerOpen, setAnswerOpen] = useState(0)
|
||||
var [answ1Corr, setAnsw1Corr] = useState(0)
|
||||
var [answ2Corr, setAnsw2Corr] = useState(0)
|
||||
var [answ3Corr, setAnsw3Corr] = useState(0)
|
||||
var [yourAnswCorr, setYourAnswCorr] = useState(0)
|
||||
var [questid, setQuestid] = useState(0)
|
||||
var [questCount, setQuestCount] = useState(0)
|
||||
var [examEnd, setExamEnd] = useState(0)
|
||||
var [examOK, setExamOK] = useState(0)
|
||||
|
||||
var [usedQuest, setUsedQuest] = useState([])
|
||||
|
||||
function showAnswer() {
|
||||
// document.querySelector('#answ1corr').style.display = 'block'
|
||||
// document.querySelector('#answ2corr').style.display = 'block'
|
||||
// document.querySelector('#answ3corr').style.display = 'block'
|
||||
document.querySelector('#result_text').style.display = 'block'
|
||||
setAnswerOpen(1)
|
||||
|
||||
|
||||
let wrongcount = 0
|
||||
|
||||
if (answ1State == answ1Corr) {
|
||||
document.querySelector('#answ1text').style.color = 'var(--ci_color_green)'
|
||||
document.querySelector('#answ1chm').style.borderColor = 'var(--ci_color_green)'
|
||||
} else {
|
||||
wrongcount++
|
||||
document.querySelector('#answ1text').style.color = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ1chm').style.borderColor = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ1corr').style.display = 'block'
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (answ2State == answ2Corr) {
|
||||
document.querySelector('#answ2text').style.color = 'var(--ci_color_green)'
|
||||
document.querySelector('#answ2chm').style.borderColor = 'var(--ci_color_green)'
|
||||
|
||||
} else {
|
||||
wrongcount++
|
||||
document.querySelector('#answ2text').style.color = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ2chm').style.borderColor = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ2corr').style.display = 'block'
|
||||
|
||||
|
||||
}
|
||||
if (answ3State == answ3Corr) {
|
||||
document.querySelector('#answ3text').style.color = 'var(--ci_color_green)'
|
||||
document.querySelector('#answ3chm').style.borderColor = 'var(--ci_color_green)'
|
||||
|
||||
} else {
|
||||
wrongcount++
|
||||
document.querySelector('#answ3text').style.color = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ3chm').style.borderColor = 'var(--ci_color_red)'
|
||||
document.querySelector('#answ3corr').style.display = 'block'
|
||||
|
||||
}
|
||||
|
||||
setQuestCount(questCount + 1)
|
||||
|
||||
if (wrongcount == 0) {
|
||||
setYourAnswCorr(1)
|
||||
let newusedquest = usedQuest
|
||||
newusedquest.push('' + questid)
|
||||
setUsedQuest(newusedquest)
|
||||
} else {
|
||||
setYourAnswCorr(0)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function getOneQuest() {
|
||||
setAnswerOpen(0)
|
||||
setAnsw1State(0)
|
||||
setAnsw2State(0)
|
||||
setAnsw3State(0)
|
||||
try {
|
||||
document.querySelector('#answ1corr').style.display = 'none'
|
||||
document.querySelector('#answ2corr').style.display = 'none'
|
||||
document.querySelector('#answ3corr').style.display = 'none'
|
||||
// document.querySelector('#result_text').style.display = 'none'
|
||||
document.querySelector('#result_text').style.display = 'block'
|
||||
|
||||
document.querySelector('#answ1text').style.color = 'black'
|
||||
document.querySelector('#answ2text').style.color = 'black'
|
||||
document.querySelector('#answ3text').style.color = 'black'
|
||||
document.querySelector('#answ1chm').style.borderColor = 'var(--ci_color_primary)'
|
||||
document.querySelector('#answ2chm').style.borderColor = 'var(--ci_color_primary)'
|
||||
document.querySelector('#answ3chm').style.borderColor = 'var(--ci_color_primary)'
|
||||
} catch (e) { }
|
||||
|
||||
if (usedQuest.length == data.length) {
|
||||
console.log('Alle Fragen beantwortet')
|
||||
} else {
|
||||
|
||||
console.log(usedQuest)
|
||||
console.log(questCount)
|
||||
|
||||
setQuestid(questCount)
|
||||
|
||||
setQuestText(data[questCount]['question'])
|
||||
setQuestData(data[questCount]['question_id'])
|
||||
let answarray = data[questCount]['answers']
|
||||
let suffledanswarray = answarray.sort((a, b) => 0.5 - Math.random())
|
||||
|
||||
setAnsw1Text(suffledanswarray[0]['answer_option'])
|
||||
setAnsw2Text(suffledanswarray[1]['answer_option'])
|
||||
setAnsw3Text(suffledanswarray[2]['answer_option'])
|
||||
|
||||
setAnsw1Corr(suffledanswarray[0]['correct'])
|
||||
setAnsw2Corr(suffledanswarray[1]['correct'])
|
||||
setAnsw3Corr(suffledanswarray[2]['correct'])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function resetExam() {
|
||||
// loadQuestList()
|
||||
// document.querySelector('.questinfo').style.display = 'none'
|
||||
// setExamEnd(0)
|
||||
// setUsedQuest([])
|
||||
// setQuestCount(0)
|
||||
// console.log('Fragenstand zurückgesetzt')
|
||||
// getOneQuest()
|
||||
lP('/fueuf26/randomexam')
|
||||
}
|
||||
|
||||
var [infoState, setInfoState] = useState(0)
|
||||
function toggleInfo() {
|
||||
if (infoState == 0) {
|
||||
document.querySelector('.questinfo').style.display = 'block'
|
||||
setInfoState(1)
|
||||
} else {
|
||||
document.querySelector('.questinfo').style.display = 'none'
|
||||
setInfoState(0)
|
||||
}
|
||||
|
||||
}
|
||||
function loadQuestList() {
|
||||
let questlist = jsondata
|
||||
let shuffledquestlist = questlist.sort((a, b) => 0.5 - Math.random())
|
||||
// let finalquestlist = shuffledquestlist.slice(0, 40)
|
||||
let finalquestlist = shuffledquestlist
|
||||
console.log(finalquestlist.length)
|
||||
data = finalquestlist
|
||||
}
|
||||
|
||||
function completeExam() {
|
||||
setExamEnd(1)
|
||||
allowexit = 1;
|
||||
if (usedQuest.length > 19) {
|
||||
setExamOK(1)
|
||||
} else {
|
||||
setExamOK(0)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setUsedQuest([])
|
||||
setQuestCount(0)
|
||||
loadQuestList()
|
||||
setAnswerOpen(0)
|
||||
document.querySelector('.questinfo').style.display = 'none'
|
||||
setExamEnd(0)
|
||||
getOneQuest()
|
||||
}, [])
|
||||
|
||||
window.onbeforeunload = confirmExit;
|
||||
var allowexit = 0;
|
||||
function confirmExit() {
|
||||
if (!allowexit) {
|
||||
return "You have attempted to leave this page. Are you sure?"
|
||||
}
|
||||
}
|
||||
|
||||
function closeExam() {
|
||||
allowexit = 0; // 1 wenn ohne Vorwarnung
|
||||
lP('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mainCon' id='mainCon'>
|
||||
<section className='sec_start'>
|
||||
<MainHeader pagetitle="" hideProfile={false} hideMenu={false} />
|
||||
<h1 className="noselect">FüUF26 Prüfungsmodus</h1>
|
||||
<br />
|
||||
|
||||
{!loadedQuest ? <div>Frage wird geladen...</div> : examEnd ?
|
||||
<div className='examendtext'>
|
||||
{examOK ? <div className='successcont'><FontAwesomeIcon className='successicon' style={{ color: 'var(--ci_color_green)' }} icon={faThumbsUp} /><br /><br /><h3>Du hast bestanden!</h3>Du hast {usedQuest.length} von {data.length} Fragen richtig beantwortet</div> : <div className='successcont'><FontAwesomeIcon className='successicon' style={{ color: 'var(--ci_color_red)' }} icon={faThumbsDown} /><br /><br /><h3>Du hast leider nicht bestanden!</h3> Du hast nur {usedQuest.length} von {data.length} Fragen richtig beantwortet. Du musst aber 8 Fragen richtig beantworten</div>}<br />
|
||||
<a id="successrestart" onClick={() => resetExam()}>Neustart</a>
|
||||
</div> :
|
||||
<div className='questcont'>
|
||||
<h3 className='questtext'>
|
||||
{questText}<br />
|
||||
<a id="info_toggle" onClick={() => toggleInfo()}>▶ Infos</a>
|
||||
<p className='questinfo'>FrageID: {questData}<br />
|
||||
Richtig beantwortet: {usedQuest.length}<br />
|
||||
Gesamt beantwortet: {questCount} / {data.length}<br />
|
||||
<a onClick={() => resetExam()}>Prüfung neustarten</a></p>
|
||||
</h3>
|
||||
<br />
|
||||
|
||||
<label className="chb_container">
|
||||
<input type="checkbox" className="checkbox" name="answ1" id="answ1" value="1" checked={answ1State} readOnly={answerOpen} onChange={(e) => !answerOpen ? setAnsw1State(e.target.checked) : console.log()}></input>
|
||||
<span className="checkmark" id="answ1chm"></span>
|
||||
<font id="answ1text" className='noselect'>{answ1Text}</font>
|
||||
<font id="answ1corr" style={{ display: 'none' }} className='noselect'>Richtig wäre: {answ1Corr ? <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_green)' }} icon={faCheck} /> : <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_red)' }} icon={faXmark} />}</font>
|
||||
</label>
|
||||
<label className="chb_container">
|
||||
<input type="checkbox" className="checkbox" name="answ2" id="answ2" value="1" checked={answ2State} readOnly={answerOpen} onChange={(e) => !answerOpen ? setAnsw2State(e.target.checked) : console.log()}></input>
|
||||
<span className="checkmark" id="answ2chm"></span>
|
||||
<font id="answ2text" className='noselect'>{answ2Text}</font>
|
||||
<font id="answ2corr" style={{ display: 'none' }} className='noselect'>Richtig wäre: {answ2Corr ? <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_green)' }} icon={faCheck} /> : <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_red)' }} icon={faXmark} />}</font>
|
||||
</label>
|
||||
<label className="chb_container">
|
||||
<input type="checkbox" className="checkbox" name="answ3" id="answ3" value="1" checked={answ3State} readOnly={answerOpen} onChange={(e) => !answerOpen ? setAnsw3State(e.target.checked) : console.log()}></input>
|
||||
<span className="checkmark" id="answ3chm"></span>
|
||||
<font id="answ3text" className='noselect'>{answ3Text}</font>
|
||||
<font id="answ3corr" style={{ display: 'none' }} className='noselect'>Richtig wäre: {answ3Corr ? <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_green)' }} icon={faCheck} /> : <FontAwesomeIcon className='' style={{ color: 'var(--ci_color_red)' }} icon={faXmark} />}</font>
|
||||
</label>
|
||||
|
||||
<font id='result_text'>{answerOpen == 0 ? " " : yourAnswCorr ? <font style={{ color: 'var(--ci_color_green)' }}>🥳 Alles richtig!</font> : <font style={{ color: 'var(--ci_color_red)' }}>☹️ Leider falsch</font>}</font>
|
||||
{!answerOpen ?
|
||||
<CTAButton className='result_cta' hideArrow={true} title="Auflösen" onclick={() => showAnswer()} /> :
|
||||
questCount >= data.length ?
|
||||
<CTAButton className='result_cta' hideArrow={true} title="Abschließen" onclick={() => completeExam()} /> :
|
||||
<CTAButton className='result_cta' hideArrow={true} title=" Weiter " onclick={() => getOneQuest()} />}
|
||||
</div>
|
||||
}
|
||||
<br /><br />
|
||||
<div className='closeexamcont noselect'><a id="closeexambtn" onClick={() => closeExam()}>Beenden</a></div>
|
||||
|
||||
</section >
|
||||
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.examendtext{text-align:center}.successicon{font-size:60px}#successrestart{font-size:23px}.successcont{text-align:center}.examendtext{width:80vw;margin-left:10vw}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@media only screen and (max-width: 1380px) {}
|
||||
Loading…
Reference in New Issue