<!-- ****** CSS & JavaScript befinden sich im Plugin "Adventskalender - CSS & JavaScript" unter "Mobiles JS Variablen" ****** -->
<div class="AdventQuiz">
<h3>Titel des Adventskalender-Quiz</h3>
  
  <div class="question">Frage zum >Quiz</div>
  
  <div class="answers">
    <button onclick="checkAnswer(this)" data-correct="false">Antwort 1 ("false" oder "true" links eintragen)</button>
    <button onclick="checkAnswer(this)" data-correct="false">Antwort 2 ("false" oder "true" links eintragen)</button>
    <button onclick="checkAnswer(this)" data-correct="true">Antwort 3  ("false" oder "true" links eintragen)</button>
 
    <br><br><a href="https://www.beispiellink.de" target="_blank">Beispiel-Link eintragen oder Zeile löschen!</a><br><br>
&#127877;&#127873; &#127872; &#128717;&#65039; &#127876;&#10052;&#65039; &#127850; &#10024; &#127852; &#128276; &#128759; &#10084;&#65039;
  </div><div class="result"></div>
</div>
 

<style>
.AdventQuiz {
  background-color: transparent; 
  /* background-color: #fff;  */
 
  font: 15px Arial, sans-serif;
  max-width: 500px;
  width:100%;
  height: auto !important;
  min-height: auto !important; 
  max-height: 50vh !important; 
  overflow: auto !important;
  padding: 15px;
  border: 1px solid #2e7d32;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  box-sizing: border-box;
}
.AdventQuiz h3 {
  color: #611e26;
  text-align: center;
}
.AdventQuiz .question {
  margin: 10px auto 20px auto;
  padding: 8px 14px;
  border: 1px solid rgba(200,200,200,0.3);
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.AdventQuiz .answers {
  text-align: center;
  padding:5px;
}
.AdventQuiz .answers button {
  display: block;
  transition: background-color 0.3s ease, transform 0.2s ease;
  margin: 10px auto;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background-color: #2e7d32;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.AdventQuiz .answers button:hover {
  background-color: #b71c1c;
  transform: scale(1.05);
}
.AdventQuiz .answers button:disabled {
  background-color: #ccc;
  color: #666;
  pointer-events: none; 
  transform: none;
  cursor: default;
}
.AdventQuiz .answers button.selected:hover {
  background-color: #1b5e20; /* keine Hover-Farbe mehr */
  transform: none;
}
.AdventQuiz .result {
 display: flex;
 align-items: center;
  justify-content: center;
  margin-top: 12px;
  font-weight: bold;
  text-align: center;
  min-height: 55px;
}
@media (max-width:470px) {
    .AdventQuiz { 
      max-width: 330px;
      max-height: 67vh !important; 
    }
  .AdventQuiz .question {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}
</style>
 

<script>
function checkAnswer(button) {
  const isCorrect = button.dataset.correct === "true";
  const container = button.closest('.AdventQuiz');
  const result = container.querySelector('.result');
  const buttons = container.querySelectorAll('button');
 
  buttons.forEach(b => {
    if (b !== button) {
      b.disabled = true;
    }
  });
  button.classList.add('selected');
 
  result.innerHTML = isCorrect ?  "&#9989; Richtig!" : "&#10060; Falsch! Die richtige Antwort lautet: " + getCorrectAnswer(container) +"!";
}
 
function getCorrectAnswer(container) {
  const correctBtn = container.querySelector('button[data-correct="true"]');
  return correctBtn ? correctBtn.textContent : "unbekannt";
}
</script>
 

<!-- ****** Hier beginnt der bereits bekannte Aufruf zum Adventskalender ****** -->
<!-- ****** Siehe auch: https://www.hilfe-tricks-tipps.de/t1164f31-Xobor-Adventskalender-amp-Osterkalender-mit-Ausloesegrafik-fuer-alle-Templates.html#msg2557 ****** -->
 
<style>
/* Adventskalender - Position und Größe der Auslöse-Grafik (Startseite) */
#hover_img {position:fixed; left:-3px; top:350px; width: 90px; z-index: 999999;}
 
.mainContainerDiv {
    max-width: 1470px !important;
    background-size: contain !important;
    text-align:center !important; 
}
 
/* Türrand verkleinert */
.cal_door { 
  color:#ffffff !important;
  display:inline-block; 
  padding:10px;
}
 
/* Tür Hover-Effekt */
.cal_door:hover {
  -webkit-filter: brightness(0.8); filter: brightness(0.8);
}
 
/* Türbilder & Türvideos - Maximale Größe */
.cal_door iframe,  .cal_door img, #cboxLoadedContent img  {
 
  max-width:100% !important;  width:80vw !important;
  object-fit: contain;
  object-position: center top;
}
 
#colorbox iframe {
  max-width:90vw !important; max-height:100% !important;
}
 
/* Türnummern deutlicher hervorheben */
.openedNumber {
  position:absolute;
  left: 10px !important;
  padding:1px 2px !important;
  background:#580003 !important;
  border-radius:5px;
  border:3px solid #880003;
  font-size:15px !important;
}
</style>
 

<script>
//  Animation der Auslösegrafik beim "Mouseover"!
//  0 = keine Auslösegrafik 
//  1 = ohne Animation
//  2 = Grafik vergrößert sich 
//  3 = Grafik versteckt sich am linken Rand
//  4 = Grafik wird transparent angezeigt
 
var Kalender_Animation = "2"
 
window.addEventListener('load', function(){
 
if($('.mainContainerDiv').length){
  // Auslösegrafik auf der Kalenderseite ausblenden
  $('#hover_img').hide(); 
 
  // Kalenderbreite
  $('.page_pages .spacer20').css({'margin':'auto','width':'50vw'});
 
  // Hintergrundfarbe Kalender
  /* $('body, .content').attr('style','background: #670402 !important;'); */
 
  // Schriftfarbe Kalender
  $('h2').css({'color':'#ffffff','margin':'20px','font-size':'20px'});
};
 
if (Kalender_Animation == 0) {
$('#hover_img').css('display','none');
};
 
if (Kalender_Animation == 1) {
};
 
if (Kalender_Animation == 2) {
$('#hover_img').hover(function() {
 
$(this).animate({width:'160px',top:'300px'},700);
}, function() {
$(this).animate({top:'350px',width:'90px'},300);
});
};
 
if (Kalender_Animation == 3) {
$('#hover_img').css('width','130px').css('left','-105px').hover(function() {
$(this).animate({left:'-3px',top:'300px'},600);
}, function() {
$(this).animate({top:'350px',left:'-105px'},1000);
});
};
 
if (Kalender_Animation == 4) {
$('#hover_img').css('opacity','0.25').hover(function() {
$(this).animate({opacity:'1.0',width:'160px','top':'300px'},300);
}, function() {
$(this).animate({width:'90px',opacity:'0.25','top':'350px'},500);
});
};
 
});
</script>
 
<a href="/xobor_adventskalender.html"><img id="hover_img" src="https://files.homepagemodules.de/b104774/f46t1197p2706n127_FUVHTIYJ.gif"></a>