Herfstmaan COMPLEET! (thx chatgpt)

by bluesweater

HTML

<div class="background-image">
  <div class="crossword-grid">
    <!-- Puzzelvelden -->
    <input class="crossword-input" style="left: 54px; top: 34px;">
    <input class="crossword-input" style="left: 208px; top: 34px;">
    <input class="crossword-input" style="left: 363px; top: 34px;">
    <input class="crossword-input" style="left: 518px; top: 34px;">
  </div>

  <!-- Tekstvakken -->
  <div class="textbox START">
    <center>
      De komende 3 weken hebben de teams wat leuks in elkaar gezet. 
      November <br>is de maand van de herfstmaan en dat betekent dat Valemoor verschijnt. 
      Een speciaal dorp waarover je meer kunt lezen in 
      <a href="https://virtualpopstar.com/home/profile?user=Bloggers&show=blog&id=44274" target="_blank" style="color:orange">deze blog</a>.<br><br>

      Het laatste weekend van november vindt het Fall Festival plaats in Valemoor. 
      De straten worden verlicht door lantaarns van pompoenschillen en muziek zweeft door de lucht. 
      Twee belangrijke elementen tijdens het festival zijn een klok en een boom. 
      Geen gewone klok maar een met symbolen van vallende bladeren, zandlopers en maanfasen, 
      want de tijd tikt anders in Valemoor. <br><br>
    
      Midden op het dorpsplein staat een speciale boom: een herinneringsboom. 
      Terwijl het plein wordt versierd met allerlei kraampjes en feestelijkheden, wordt er in de boom gesneden. 
      De vorm is precies goed voor een klein masker. 
      Een zwart masker, gehuld in geheimzinnige runen, moet worden geplaatst in de boom. 
      Alleen dan kan het fall festival beginnen. <br><br>

      <b>Praktische zaken</b> <br><br>
      Klik op de knop linksonder met ‘schema’ voor alle activiteiten die plaatsvinden. 
      Daarnaast worden er verschillende sets weggeven. Hiernaast komen er een aantal voorbij!
      Verder staan er hieronder 4 vakken. Vul hier de 4 getallen uit <a...

CSS

* {
  font-family: Arial, sans-serif;
  font-size: 13px;
  box-sizing: border-box;
}

.background-image {
  position: relative;
  width: 688px;
  height: 700px;
  background: url(https://i.imgur.com/lHQnJGS.png);
}

.crossword-grid {
  position: absolute;
  width: 688px;
  height: 210px;
  top: 480px;
}

.crossword-input {
  position: absolute;
  height: 100px;
  width: 100px;
  background: transparent;
  color: #fff;
  font-size: 45px;
  border: none;
  outline: none;
  text-transform: uppercase;
  text-align: center;
  z-index: 5;
}

.textbox {
  position: absolute;
  width: 460px;
  height: 345px;
  top: 120px;
  left: 120px;
  color: white;
  overflow-y: auto;
  border-radius: 7px;
}

/* Scrollbar styling */
.textbox::-webkit-scrollbar {
  width: 8px;
}
.textbox::-webkit-scrollbar-thumb {
  background-color: #fff;
  border-radius: 5px;
}
.textbox::-webkit-scrollbar-thumb:hover {
  background-color: #002834;
}

.button-container {
  position: absolute;
  width: 160px;
  height: 40px;
  left: 264px;
  top: 655px;
}

#crosswordCheck {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #680f30;
  cursor: pointer;
}

.crossword-prize-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
}

#crosswordPrize {
  color: white;
  text-align: center;
  font-size: 25px;
  text-shadow: 2px 2px 1px #333;
}

JavaScript

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  // ✏️ Tekstvak wisselen
  $('.button').click(function() {
    const textBox = this.className.split(' ')[1]; // bijv. "SCHEMA"
    $('.textbox').hide();
    $('.' + textBox).show();
  });

  // ✅ Controleer puzzel
  $('#crosswordCheck').click(function() {
    const answer = $('.crossword-input')
      .map(function() { return $(this).val(); })
      .get()
      .join('')
      .toUpperCase();

    if (answer === 'GEM5') {
      $('#crosswordPrize').html(`<span style="font-size: 35px;">GEFELICITEERD!</span><br>HIERBIJ DE 1E SET<br><br><b>0MG!EENB03K3NS3TJ3!!!</b><br><br>Te claimen tot en met zondag 30 november.`);
      $('#crosswordPrizeContainer').css('display', 'flex');
    } else {
      alert('Probeer opnieuw!');
    }
  });
});
</script>