tree
parent
bfd9af5d1a
commit
6ef111a931
@ -0,0 +1,71 @@
|
|||||||
|
<!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 id="switchTo2_newspaper">read a copy of today's newspaper</button> that someone left on the bench or <button id="switchTo2_walk">go for a little walk</button>.
|
||||||
|
<button>Just relax</button> there if you feel like it .
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="2_park_newspaper" style="display: none;">
|
||||||
|
<button id="switchTo1_news">(back)</button> 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 <button id="paper_1">read</button>,<button id="paper_2">read</button>,<button id="paper_3">read</button>,<button id="paper_4">read</button>.
|
||||||
|
<!--
|
||||||
|
<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>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
<div id="2_park_walk" style="display:none">
|
||||||
|
<button id="switchTo1_walk">(back)</button> You are walking...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="gardenSpace" style="display:none">
|
||||||
|
<div id="pane">
|
||||||
|
<div id ="square">
|
||||||
|
<img src="gifs/walking.gif">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="papers">
|
||||||
|
|
||||||
|
<div id="readme_1" style="display: none;">
|
||||||
|
<iframe width="300px" height="250px" src="readme/readme_1.html" title="read me"></iframe>
|
||||||
|
</div>
|
||||||
|
<div id="readme_2" style="display: none;">
|
||||||
|
<iframe width="300px" height="400px"src="readme/readme_2.html" title="read me"></iframe>
|
||||||
|
</div>
|
||||||
|
<div id="readme_3" style="display: none;">
|
||||||
|
<iframe width="300px" height="200px" src="readme/readme_3.html" title="read me"></iframe>
|
||||||
|
</div>
|
||||||
|
<div id="readme_4" style="display: none;">
|
||||||
|
<iframe width="300px" height="200px" src="readme/readme_4.html" title="read me"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="script.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> start</h1>
|
||||||
|
<p>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late.
|
||||||
|
You spot a copy of today's newspaper on the bench. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe name="news" src="http://cnn.com/"></iframe>
|
||||||
|
<a href="http://repubblica.it" target="news">Read</a>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="0_start.html">start</a>
|
||||||
|
|
||||||
|
<form action="0_start.html"><input type="submit" value="START"></form>
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1> start</h1>
|
||||||
|
<p>It's Saturday morning. You are sitting on a bench at the park waiting for your friend Amanda. She seems to be really late.
|
||||||
|
You spot a copy of today's newspaper on the bench. Maybe you want to <a href="1_newspaper.html">give it a read</a>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe name="news" src="http://cnn.com/"></iframe>
|
||||||
|
<a href="http://repubblica.it" target="news">Read</a>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
||||||
|
<title>start</title>
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<a href="0_start.html">start</a>
|
||||||
|
|
||||||
|
<form action="0_start.html"><input type="submit" value="START"></form>
|
||||||
|
|
||||||
|
<script src="jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="index.js" ></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,36 @@
|
|||||||
|
div.figure1 {
|
||||||
|
position:absolute;
|
||||||
|
left: 15%;
|
||||||
|
top: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure2 {
|
||||||
|
position:absolute;
|
||||||
|
left: 70%;
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure3 {
|
||||||
|
position:absolute;
|
||||||
|
right: 10%;
|
||||||
|
top: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure4 {
|
||||||
|
position:absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure5 {
|
||||||
|
position:absolute;
|
||||||
|
left:45%;
|
||||||
|
top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.figure6 {
|
||||||
|
position:absolute;
|
||||||
|
left:10%;
|
||||||
|
bottom: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-US">
|
||||||
|
<head>
|
||||||
|
<title>wayfair</title>
|
||||||
|
<link rel="stylesheet" href="wayfair.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="score">
|
||||||
|
Click on the objects<br>
|
||||||
|
You saved <span id="result" >0</span> kids out of 6.
|
||||||
|
<div id="win"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="figure1">
|
||||||
|
<img id="forniture1" src="../gifs/forniture_1.gif" style="display: block;">
|
||||||
|
<img id="child1" src="../gifs/child_6.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="figure2">
|
||||||
|
<img id="forniture2" src="../gifs/forniture_2.gif" style="display: block;">
|
||||||
|
<img id="child2" src="../gifs/child_2.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="figure3">
|
||||||
|
<img id="forniture3" src="../gifs/forniture_3.gif" style="display: block;">
|
||||||
|
<img id="child3" src="../gifs/child_3.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="figure4">
|
||||||
|
<img id="forniture4" src="../gifs/forniture_4.gif" style="display: block;">
|
||||||
|
<img id="child4" src="../gifs/child_4.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="figure5">
|
||||||
|
<img id="forniture5" src="../gifs/forniture_5.gif" style="display: block;">
|
||||||
|
<img id="child5" src="../gifs/child_5.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="figure6">
|
||||||
|
<img id="forniture6" src="../gifs/forniture_6.gif" style="display: block;">
|
||||||
|
<img id="child6" src="../gifs/child_1.gif" style="display: none;">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="wayfair.js" ></script>
|
||||||
|
</body>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
var counter = 0;
|
||||||
|
$("#forniture1").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture1").hide();
|
||||||
|
$("#child1").show();
|
||||||
|
winning();
|
||||||
|
if (counter===1) {
|
||||||
|
console.log("first click");
|
||||||
|
localStorage.child=1;
|
||||||
|
localStorage.childImage= $("#child1").attr("src");
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$("#forniture2").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture2").hide();
|
||||||
|
$("#child2").show();
|
||||||
|
winning();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#forniture3").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture3").hide();
|
||||||
|
$("#child3").show();
|
||||||
|
winning();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#forniture4").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture4").hide();
|
||||||
|
$("#child4").show();
|
||||||
|
winning();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#forniture5").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture5").hide();
|
||||||
|
$("#child5").show();
|
||||||
|
winning();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#forniture6").click(function(){
|
||||||
|
counter ++;
|
||||||
|
$('#result').html(counter);
|
||||||
|
$("#forniture6").hide();
|
||||||
|
$("#child6").show();
|
||||||
|
winning();
|
||||||
|
});
|
||||||
|
|
||||||
|
function winning() {
|
||||||
|
if (counter === 6) {
|
||||||
|
$('#win').html("you are a savior <3 <3");
|
||||||
|
window.open("https://www.bbc.com/news/world-53416247");
|
||||||
|
|
||||||
|
} };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});;
|
||||||
|
|
||||||
Loading…
Reference in New Issue