Zomerpuzzels per dag

Dag 0: versie 0 Dag 1: versie 6 Dag 2: versie 8 Dag 3: versie 13 Dag 4: versie 16 Dag 5: versie

by bluesweater

HTML

<!-- Met onderstaande code kun je een tekstvak toevoegen. Hiervoor moet je de breedte (width), hoogte (heigth), bovenste grens (top) en linker grens (left) nodig. Deze waardes kun je vervolgens invullen achter de juiste plek. -->

<div align="left">
  <div style="overflow: auto; position: absolute; width:290px; height: 235px; top: 573px; left: 390px; color:white;">Ik heb wat nieuws bedacht, waarin veel werk is gegaan. Namelijk 7 zomerpuzzels en een hele lay-out met aanklikbare dingen. Lees hieronder alles door voor informatie over de competitie!<br><br>

    <b>Wat is aanklikbaar?</b><br>
    <b>1.</b> Je kunt op alle grote (nu gekleurde) rondjes klikken, er verschijnt een afbeelding met 'coming soon'. Wanneer het de juiste dag is, verschijnt er een afbeelding met de puzzel. <br>
    <b>2.</b> De getallen in de bruine rondjes worden aanklikbaar <i>zodra de puzzel er is</i>. Als je hierop klikt, verandert de tekst in het vakje hieronder met daarin uitleg over deze puzzel.

    <br><br><b>Hoe werkt het?</b><br>
    Komende 6 dagen verschijnt* elke dag een nieuwe puzzel. Van een woordzoeker tot raadsels en meer. De eerste puzzel (puzzel 0) is NIET van belang voor de competitie! <br>
    De overige puzzels zijn een afbeelding die je zelf kan invullen (met een screenshot). Wanneer je 'm opgelost hebt, mail je <a href="https://virtualpopstar.com/home/messages?x=new&to=Bluesweater" target="_blank">mij</a> de ingevulde puzzel en de eventueel oplossing. Je mag alle puzzels maken of alleen degene die je leuk vindt! <br><br>

    <b>*Opmerking: </b> Ik pas handmatig het artikel iedere dag aan. De puzzel is dus niet al om 00:00 beschikbaar, maar pas als ik het artikel bijgewerkt hebt. Ik zal in de comments laten weten als de puzzel er is. <br><br>

    <b>Deadline</b><br>
    Je hebt 2 weken de tijd voor alle puzzels, oftewel tot en met <b>zondag 8 september 23:59 uur</b>.
    Vanwege de prijs, zou ik het enorm waarderen als je in 1 bericht minstens 2 opgeloste puzzels...

CSS

.img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 98%;
  max-width: 98%;
}

.popup {
  display: none;
  position: absolute;
  background-color: transparent;
  border: none;
  border-radius: 5px;
  padding: 10px;
  z-index: 1000;
  transform: translate(5%, -127%);
}

.popup img {
  max-width: 600px;
  max-height: 660px;
  border-radius: 5px;
}

.popup a {
  color: blue;
  text-decoration: underline;
}

* {
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: black;
}

JavaScript

import $ from "https://esm.sh/jquery";
document.querySelectorAll("area[data-popup]").forEach((area) => {
  area.addEventListener("click", function (event) {
    event.preventDefault();
    const popupId = this.getAttribute("data-popup");
    const popup = document.getElementById(popupId);

    // Hide any visible popups
    document
      .querySelectorAll(".popup")
      .forEach((p) => (p.style.display = "none"));

    // Show the clicked popup
    const rect = this.getBoundingClientRect();
    popup.style.left = `${rect.left + window.scrollX}px`;
    popup.style.top = `${rect.bottom + window.scrollY}px`;
    popup.style.display = "block";
  });
});

document.addEventListener("click", function (event) {
  if (!event.target.matches("area[data-popup]")) {
    document
      .querySelectorAll(".popup")
      .forEach((p) => (p.style.display = "none"));
  }
});

document.querySelectorAll(".button").forEach((button) => {
  button.addEventListener("click", function () {
    const textBoxClass = this.className.split(" ")[1];
    document
      .querySelectorAll(".hide")
      .forEach((el) => (el.style.display = "none"));
    document.querySelector("." + textBoxClass).style.display = "block";
  });
});

$(".button").click(function () {
  var textBox = this.className.split(" ")[1];
  $(".hide").hide();
  $("." + textBox).show();
});