first commit

4 years ago · eadb276e93
commit eadb276e93
3 changed files with 101 additions and 0 deletions
--- a/script.js
+++ b/script.js
@ -0,0 +1,36 @@
+
+///////////////////////////////
+// all jQuery stuff here 
+
+$(document).ready(function() {
+  
+  $("#trigger").click(function() {
+  $("#demo").html("Hello, World!");
+  });
+
+  $(document).on('change', 'select', function(){
+    alert($(this).find('option:selected').text());
+    
+  });
+
+
+});
+
+
+//go back+go forward buttons
+  function goBack() {
+    window.history.back();
+  }
+  function goForward() {
+    window.history.go(1);
+  }
+
+
+
+//to switch divs inside the container div
+
+  function show(param_div_id) {
+    document.getElementById("container").innerHTML = document.getElementById(param_div_id).innerHTML;
+  }  
+
+
--- a/start.html
+++ b/start.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <title>start</title>
+    <link rel="stylesheet" href="style_1.css">
+    
+</head>
+<body>
+<!-- <img class="source-image" src="background_4.jpg" alt=""/> -->
+
+<button onclick="goBack()">←</button>
+
+<button onclick="goForward()">→</button>
+
+
+<div id="container">
+<div id="1_park" style="display: block;">
+    It's Sunday. You are sit on a bench in the park. Your friend seems to be really late. You need a way to kill time until she arrives.
+    You can either <button onclick="show('2_park_newspaper')">read a copy of today's newspaper</button> that someone left on the bench or <button>go for a walk</button>. 
+    <button>Just relax</button> there if you feel like it .
+</div>
+
+<div id="2_park_newspaper" style="display: none;">
+You open the newspaper, willing to engage with some juicy local news. <br>Suddenly, some sheets of paper start to fall on the ground. 
+Maybe you want to
+<select name="sheets" id="sheets">
+    <option value="1">read it</option>
+    <option value="2">read it</option>
+    <option value="3">read it</option>
+    <option value="4">read it</option>
+</select>
+<button id="trigger">Click me</button>
+<p id="demo"></p>
+</div>
+
+
+
+
+</div>
+
+<div id="readme_1" style="display: none;">
+<iframe src="https://pzwiki.wdka.nl/mediadesign/Main_Page" title="read me"></iframe>
+></div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script type="text/javascript" src="script.js" ></script>
+    
+</body>
--- a/style_1.css
+++ b/style_1.css
@ -0,0 +1,17 @@
+body {
+    background-color: black;
+    font: 22px monospace;
+   }
+
+#container {
+    background-color: white;
+    border: 2px black;
+    width: 70%;
+    bottom: 0px;
+    left: 13%;
+    right:13%;
+    position:fixed;
+    padding: 2% 2% 2% 2%;
+    margin-bottom: 2%;
+
+}