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%;
 }