Kruiswoord puzzel

by Mylastwish

HTML

<div class="backgroundImage">
 <div class="crosswordGrid">
  
  <!--Donker-->
        <input class="crosswordInput" style="position: absolute; left: 18px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--D-->

        <input class="crosswordInput" style="position: absolute; left: 51px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--o-->

        <input class="crosswordInput" style="position: absolute; left: 85px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--n-->

        <input class="crosswordInput" style="position: absolute; left: 119px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--k-->

        <input class="crosswordInput" style="position: absolute; left: 119px; top: 47px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--e-->





    </div>

 

<div class="textbox1">
  
  <div style="position: relative;color:white;">
TYP HIER JE TEKST!
<i><b><u>Verticaal</u></b></i><br>
1. Ze had president kunnen worden in Amerika en haar man was president.<br><br>
2. Ze is actrice en presentatrice en had van 1986-2011 een eigen praatprogramma met haar naam in Amerika.<br><br>
3. Ze was een Britse schrijfster in de 18e en 19e eeuw.<br><br>
4. Ze was de eerste vrouwelijke arts in Nederland. <br><br>
5. Ze heeft een belangrijke rol gespeeld in de honderdjarige oorlog tussen Frankrijk en Engeland.<br>

</div></div>

<div class="textbox2"><div style="position: relative;">
   <i><b><u>Horizontaal</u></b></i><br>
6. Ze was een wetenschapper en heeft twee nobelprijzen gewonnen. Ze ontdekte veel over radioactiviteit.<br><br>
7. Ze was de langstzittende koningin (TIP: dit woord begint met 'queen'). <br><br>
8. Deze naam was veel voorkomend bij vorstinnen van het oude...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 688px;
background: url(https://i.postimg.cc/Kv5MDkRn/kerstkruiswoord.png);
}

/* Hier aanpassen: afbeeldingslink en afbeeldingsgrootte (width, height) */

.crosswordGrid
{
  position: absolute;
  overflow: auto;
  width: 688px;
  height: 555px;
}

/* Dit gaat over het raster (grid) met de vakjes. AFmetingen aanpassen (widht, height, left, top) */

.crosswordInput
{
  height: 22px;
  width: 20px;
  z-index:5;
  color: white;
  background: transparent;
  font-size: 16px;
}

/* Color is de tekst kleur in de vakjes (je kan hier hexcode of zoals zo kleur neerzetten)
Fontsize kan groter/kleiner, maar 16 is inprincipe goed leesbaar. */

.crossword
{
  display: none;
position: absolute;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
}

/* Niks aanpassen! */

.textbox1
{
  position: absolute;
  overflow: auto;
  width: 330px;
  height: 100px;
  top: 580px;
  left: 10px;
  border-radius: 7px;
  color: white;
}

.textbox2
{
  position: absolute;
  overflow: auto;
  width: 330px;
  height: 100px;
  top: 580px;
  left: 360px;
  border-radius: 7px;
  color: white;
}

/* Dit gaat over tekstvak: pas hier afmetingen aan. Kleur kan ook. */

.button
{
  position: absolute;
overflow: auto;
width: 65px;
height: 80px;
left: 568px;
top: 445px;

}

/* Dit gaat over de check: pas hier afmetingen aan! 
HIERONDER HOEFT ER NIKS TE WORDEN AANGEPAST! */

#crosswordCheck
{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #680f30;
  cursor: pointer;
  background: transparent;
  z-index: 10;
}

#crosswordPrize
{
  color: white;
  text-align: center;
  font-size: 20px;
  text-shadow: 2px 2px 1px #333;
  z-index: 11;
}

#crosswordPrizeContainer {
  position: fixed; /* instead of absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height:...

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toUpperCase();
    if ( answerString == "DO" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">GEFELICITEERD!</span><br>Hierbij een code voor 2 leuke setjes<BR><BR><b>D3c3mb3rPuzzelPrij$!</b><br><br> Te claimen tot en met zondag 14 december' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Probeer opnieuw!" );
    }
});