Wie säkular bin ich?
:root {
font-family: system-ui, -apple-system, „Segoe UI“, Roboto, Helvetica, Arial, „Noto Sans“, sans-serif;
line-height: 1.45;
}
body {
padding: 24px;
max-width: 100%;
margin: 0;
color: #111;
box-sizing: border-box;
}
header {
margin-bottom: 18px;
}
h5 {
font-size: 1.05rem;
margin: 0 0 8px 0;
}
.card {
border: 1px solid rgba(0,0,0,0.08);
padding: 18px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,0.03);
width: 100%;
box-sizing: border-box;
}
.question {
margin-bottom: 16px;
}
.choices {
list-style: none;
padding: 0;
margin: 8px 0 0 0;
}
label.choice {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px;
}
input[type=radio] {
width: 18px;
height: 18px;
vertical-align: middle;
}
.controls {
display: flex;
gap: 10px;
align-items: center;
margin-top: 14px;
}
button {
padding: 8px 12px;
border: 1px solid rgba(0,0,0,0.08);
background: #fff;
cursor: pointer;
}
button.primary {
background: linear-gradient(180deg, rgba(0,0,0,0.03), #fff);
font-weight: 600;
}
.result {
margin-top: 14px;
font-weight: 700;
}
.feedback {
margin-top: 10px;
padding: 10px;
}
.correct {
background: rgba(40,167,69,0.08);
border: 1px solid rgba(40,167,69,0.12);
color: #155724;
}
.wrong {
background: rgba(220,53,69,0.06);
border: 1px solid rgba(220,53,69,0.1);
color: #721c24;
}
.hidden {
display: none;
}
.small {
font-size: 0.92rem;
}
(function(){
const answers = {q1:’a‘,q2:’b‘,q3:’a‘,q4:’a‘,q5:’b‘,q6:’a‘,q7:’a‘,q8:’a‘,q9:’a‘,q10:’a‘};
const form = document.getElementById(‚quizForm‘);
const checkBtn = document.getElementById(‚checkBtn‘);
const revealBtn = document.getElementById(‚revealBtn‘);
const resetBtn = document.getElementById(‚resetBtn‘);
const scoreEl = document.getElementById(’score‘);
const feedbackArea = document.getElementById(‚feedbackArea‘);
function getSelected(name){
const el = form.querySelector(‚input[name=“‚+name+'“]:checked‘);
return el ? el.value : null;
}
function evaluate(showFeedback){
let correct = 0; let total=10;
feedbackArea.innerHTML=“;
for(let i=1;i{l.classList.remove(‚correct‘,’wrong‘)});
if(sel===answers[key]){ correct++; if(showFeedback){
const label = form.querySelector(‚input[name=“‚+key+'“][value=“‚+sel+'“]‘).closest(‚label‘);
label.classList.add(‚correct‘);
}} else {
if(showFeedback){
if(sel){
const chosen = form.querySelector(‚input[name=“‚+key+'“][value=“‚+sel+'“]‘).closest(‚label‘);
chosen.classList.add(‚wrong‘);
}
const correctLabel = form.querySelector(‚input[name=“‚+key+'“][value=“‚+answers[key]+'“]‘).closest(‚label‘);
correctLabel.classList.add(‚correct‘);
}
}
}
scoreEl.textContent = `Erreichte Punkte: ${correct} / ${total}`;
if(showFeedback){
feedbackArea.classList.remove(‚hidden‘);
feedbackArea.innerHTML = `
10 kurze Fragen, je 4 Antworten. Wähle und klicke auf „Antwort prüfen“.
-
Was bedeutet Säkularität im Kern?
-
Ein säkularer Staat …
-
Welche Aussage passt am besten zum säkularen Denken?
-
Warum ist Säkularität wichtig?
-
Ein Beispiel für säkulare Politik ist …
-
Welche Länder gelten als stark säkular?
-
Was fördert eine säkulare Gesellschaft?
-
Säkularität bedeutet NICHT …
-
Welche Rolle spielt die Wissenschaft in einer säkularen Gesellschaft?
-
Säkularität im Alltag heißt …
Du hast ${correct} von ${total} Fragen richtig beantwortet.
`;
}
return correct;
}
checkBtn.addEventListener(‚click‘,function(){
evaluate(true);
scoreEl.focus && scoreEl.focus();
});
revealBtn.addEventListener(‚click‘,function(){
feedbackArea.classList.remove(‚hidden‘);
let list = ‚- ‚;
for(let i=1;i<=10;i++){
list += `
- Frage ${i}: richtige Antwort ${answers[‚q’+i].toUpperCase()} `; } list += ‚
${list}
`;
scoreEl.textContent = “;
});
resetBtn.addEventListener(‚click‘,function(){
form.reset(); scoreEl.textContent=“; feedbackArea.classList.add(‚hidden‘);
form.querySelectorAll(‚label.choice‘).forEach(l=>{l.classList.remove(‚correct‘,’wrong‘)});
});
form.addEventListener(‚keypress‘,function(e){
if(e.key === ‚Enter‘){
e.preventDefault(); evaluate(true);
}
});
})();

Neueste Kommentare