Zomeractie | Vulkanen

11 Juli 2020

by Evanlynn

HTML

<div class="vulkanenContainer">
<div id="unique_id" style="position: absolute; left: 40px; z-index: 2;"></div>

	<div class="pagesContainer">

  		<!-- PAGE 1 -->
  		<div id="page_0" class="pages">
        <!-- Article Start -->
        <div style="position: relative; width: 960px; height: 756px; background: url(https://i.imgur.com/mnyXly3.jpg);">
          <div style="position: absolute; overflow: auto; width: 317px; height: 308px; left: 58px; top: 237px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #2b4c5a;">
Het is tijd voor het tweede Zomeractiethema. Deze keer zal zowel het NT als het CT zich buigen over vulkanen.
<br><br>
<span class="articleHeader">platentektoniek</span><br>
Het bestaan van vulkanen is te danken aan de <strong>platentektoniek</strong>. Het buitenste laagje van de aarde waar wij ons op bevinden, ook wel de aardkorst, bestaat uit allerlei verschillende platen. Deze aardplaten zitten niet vast aan elkaar en ontstaan, bewegen en verdwijnen. Dit gebeurt doordat ze worden aangedreven door convectiestromingen, die onder de aardkorst voltrekken. <br>
Bij een <strong>convectiestroom</strong> is er warme <strong>magma</strong> dat stijgt, waardoor het tegen de onderkant van de aardkorst aankomt. Omdat het <strong>gesteente</strong> niet verder omhoog kan, trekt het weg naar de zijkanten, waar het weer iets afkoelt. Doordat het dan wat kouder wordt, daalt het vloeibare gesteente weer. Door dit proces ontstaat er een stroming, waar de aardplaten als het ware op drijven.
<br><br>
Het is dus duidelijk dat de aardplaten bewegen. Maar deze aardplaten kunnen niet zomaar bewegen; er is namelijk niet oneindig veel ruimte en de platen hebben elk hun eigen richting. De platen zullen dus langs elkaar heen, van elkaar af of naar elkaar toe gaan. Een <strong>plaatgrens</strong> is daardoor transform, <strong>divergent</strong> of <strong>convergent</strong>.
<br><br>
<span class="articleHeader">plaatbewegingen</span><br>
Bij een...

CSS

/* GENERAL */
* {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.woordzoekerContainer {
  width: 792px;
  text-align: center;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
}

.header {
  font-family: 'Patrick Hand SC', cursive;
  font-size: 60px;
  line-height: 30px;
  display: block;
  margin-bottom: 10px;
}

.articleHeader {
  font-family: 'Patrick Hand SC', cursive;
  font-size: 23px;
  line-height: 23px;
  font-weight: bold;
}

#unique_id {
  color: #bfd8ff;
  opacity: 0.4;
  pointer-events: none;
}

/* PAGES */
.vulkanenContainer {
  width: 960px;
  height: 756px;
  overflow: hidden;
}

.pages {
  position: relative;
}

.goForth {
  position: absolute;
  height: 30px;
  width: 30px;
  top: 363px;
  cursor: pointer;
}

.goForth.back, .goForth.back > span {
  left: 0px;
}

.goForth.next, .goForth.next > span {
  right: 0px;
}

/* NONOGRAM */
.nonoContainer {
  margin: 0px 17px;
  width: 762px;
}

.nrBox,
.wordBox {
  float: left;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  margin-left: -2px;
  margin-top: -2px;
}

.wordBox {
  border: 2px solid black;
}

.hiddenMessage {
  width: 762px;
  outline: none;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid black;
  box-sizing: border-box;
  margin-bottom: 2px;
}

/* PLAYFAIR */
.playfair {
  height: 683px;
  overflow: auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  text-align: justify;
}

.playfair.explanation {
  float: left;
  width: 55%;
}

.playfair.puzzle {
  float: right;
  width: 44%;
}

.cipherBox {
  float: left;
  width: 30px;
  height: 30px;
  border: 2px solid black;
  outline: none;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  line-height: 30px;
  margin-left: -2px;
  margin-top: -2px;
  text-transform: uppercase;
}

.cipherSolution {
  width:...

JavaScript

$('head').append('<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap" rel="stylesheet">');

// ID
$(document).ready(function () {
  var placeID = localStorage.getItem('uniqueID');
	if (placeID == null) {
  	var newID = Math.floor(Math.random() * 1000000);
    localStorage.setItem('uniqueID', newID);
  }
  var placeID = localStorage.getItem('uniqueID');
  $('#unique_id').append(placeID);
});

// PAGES
$( ".pages" ).hide();
$( "#page_0" ).show();
  
$( ".goForth.next" ).click( function goToNextPage() {
	$( this ).parent().hide();
	var parentPage = $( this ).parent().attr( "id" ); 
	var trimmedparentPage = parentPage.substring( 5 ); 
	trimmedparentPage++;
	var nextPage = ( "#page_" + trimmedparentPage ); 
	$( nextPage ).show();
});

$( ".goForth.back" ).click( function goToPrevPage() {
	$( this ).parent().hide();
	var parentPage = $( this ).parent().attr( "id" ); 
	var trimmedparentPage = parentPage.substring( 5 ); 
	trimmedparentPage--;
	var nextPage = ( "#page_" + trimmedparentPage ); 
	$( nextPage ).show();
});

$( "#pageSelector" ).change( function() {
	$( ".pages" ).hide();
	var optionVal = $( "#pageSelector option:selected" ).attr( "value" ); console.log( optionVal );
	var trimmedoptionVal = optionVal.substring( 1 ); 
	var nextPage = ( "#page_" + trimmedoptionVal ); 
	$( nextPage ).show();
});

// OTHER
$('.wordBox').click(function() {
	if ($(this).css('background-color') == 'rgb(255, 255, 255)') {
  	$(this).css('background-color', 'rgb(222, 235, 255)');
  } else if ($(this).css('background-color') == 'rgb(222, 235, 255)') {
  	$(this).css('background-color', 'rgb(255, 222, 222)');
  } else {
  	$(this).css('background-color', 'rgb(255, 255, 255)');
  }
});

$('.2math').click(function() {
	$('.nonogram').hide();
  $('.rekensom').show();
});

$('.back2Nono').click(function() {
	$('.nonogram').show();
  $('.rekensom').hide();
});

$('.2schuif').click(function() {
	$('.woordzoeker').hide();
 ...