Skip to content

Instantly share code, notes, and snippets.

@DestinyLuong

DestinyLuong/index.html

Created July 21, 2017 02:16
Show Gist options
  • Save DestinyLuong/4e1be07ccbc83da9ef806ff988beba15 to your computer and use it in GitHub Desktop.
Save DestinyLuong/4e1be07ccbc83da9ef806ff988beba15 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=4e1be07ccbc83da9ef806ff988beba15
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Earth Simulator</title>
<link rel="stylesheet"
type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</head>
<body>
<h1 id="heading">Earth Simulator</h1>
<div id="counter">
<div id= "money">
<span id="cash">$:</span>
<span id="moneyamount"></span>
</div>
<div id="carbon">
<span id="co">CO2:</span>
<span id="co2amount"></span>
</div>
</div>
<div id="intro">
<div>
<p id="describe"> Earth Simulator is a game where you live through different choices to see the outcome of the Earth.</p>
<div class="logo">
<img src="http://www.howdoeslooklike.com/wp-content/uploads/2013/03/This-picture-is-showing-how-earth-look-like-1.jpg">
<div>
<button class="start">Start</button>
</div>
</div>
</div>
</div>
<div class="questions">
<div id= "job">
<h1 class="role">Choose your role</h1>
<div id="nature" >
<button id="answer1" class="answer">Environmentalist</button>
<p id="answer1d">
Description: The Environmentalist is a person who likes nature and stays away from the industrial life.
</p>
</div>
<div id="buisness" >
<button id="answer2" class="answer">Businessman</button>
<p id="answer2d">
Description: The Businessman is a person who is involved in economics and politics.
</p>
</div>
</div>
</div>
<div id="end">
<div id="results"></div>
</div>
</body>
</html>
Raw
popcode.json
{"enabledLibraries":["jquery"]}
Raw
script.js
var money = 0;
var co2 = 0;
$("#moneyamount").html(money);
$("#co2amount").html(co2);
$(".start").click(function() {
$("#counter").show();
$("#intro").hide();
$(".questions").show();
});
$(".answer").click(function callmewhenclicked(event){
if($(event.target).text() === "Environmentalist"){
changequestion (chooseyourtransportation);
}
if($(event.target).text() === "Insulated"){
changequestion (chooseyourprotest);
}
if($(event.target).text() === "Imported"){
changequestion (chooseyourhousing);
}
if($(event.target).text() === "Local"){
changequestion (chooseyourhousing);
}
if($(event.target).text() === "Businessman"){
changequestion (chooseyourtransportation);
}
if($(event.target).text() === "Protest"){
//invoke go to end state function
renderendpage();
}
if($(event.target).text() === "Counter-Protest"){
//invoke go to end state function
renderendpage();
}
if($(event.target).text() === "Car"){
changequestion (chooseyourfood);
}
if($(event.target).text() === "Bus"){
changequestion (chooseyourfood);
}
if($(event.target).text() === "Non-Insulated"){
changequestion (chooseyourprotest);
}
function changequestion(object) {
$("#answer1").text(object.answer1);
$("#answer2").text(object.answer2);
$("h1").text(object.h1);
$("#answer1d").text(object.answer1d);
$("#answer2d").text(object.answer2d);
}
var chooseyourrole = {
name: 'chooseyourrole',
h1: 'Choose your Role',
answer1: 'Enviornmentalist',
answer2: 'Businessman',
answer1d: 'Description',
answer2d: 'Description',
};
var chooseyourtransportation = {
name: 'transportation',
h1: 'Choose your Transportation',
answer1: 'Bus',
answer2: 'Car',
answer1d: 'Ride a bus',
answer2d: 'Drive a car',
};
var chooseyourfood = {
name: 'Food',
h1: 'Choose your Food',
answer1: 'Local',
answer2: 'Imported',
answer1d: 'Grow your food',
answer2d: 'Buy from local Walmart',
};
var chooseyourhousing= {
name: 'Housing',
h1: 'Choose your House',
answer1: 'Insulated',
answer2: 'Non-Insulated',
answer1d: 'Buy a Insulated House',
answer2d: 'Buy a Non-Insulated House',
};
var chooseyourprotest= {
name: 'Protest',
h1: 'Choose to go to the Protest',
answer1: 'Protest',
answer2: 'Counter-Protest',
answer1d: 'Choose to not go to the protest',
answer2d: 'Choose to counter-protest',
};
function renderendpage() {
if (money > 10) {
moneytospend = "lots money";
}
else if (money > 0) {
moneytospend = "some money";
}
else {
moneytospend = "no money";
}
if (co2 > 10) {
amountofcarbon = "lots carbon";
}
else if (co2 > 0) {
amountofcarbon = "some carbon";
}
else {
amountofcarbon = "no carbon";
}
if (moneytospend === "no money" && amountofcarbon==="no carbon") {
$("#results").html("You sacrifice yourself for a free carbon world.");
$("body").css("background-color", "blue");
} else if (moneytospend === "no money" && amountofcarbon==="some carbon") {
$("#results").html("you sacrifice yourself to maintain a decent amount of carbon world.");
$("body").css("background-color", "purple");
} else if (moneytospend === "no money" && amountofcarbon === "lots carbon") {
$("#results").html("End of the world");
$("body").css("background-color", "red");
} else if (moneytospend === "some money" && amountofcarbon === "lots carbon") {
$("#results").html("Not good enough");
$("body").css("background-color", "tan");
} else if (moneytospend === "some money" && amountofcarbon === "no carbon") {
$("#results").html("You maintain a normal life and less carbon at the same time");
$("body").css("background-color", "lightblue");
} else if (moneytospend === "some money" && amountofcarbon === "some carbon") {
$("#results").html("You maintained the original situation");
$("body").css("background-color", "gainsboro");
} else if (moneytospend === "lots money" && amountofcarbon === "lots carbon") {
$("#results").html("Doesn't care about the environment");
$("body").css("background-color", "yellow");
} else if (moneytospend === "lots money" && amountofcarbon === "no carbon") {
$("#results").html("You benefited and get rich in the meantime.");
$("body").css("background-color", "green");
} else if (moneytospend === "lots money" && amountofcarbon === "some carbon") {
$("#results").html("You maintain the carbon and become rich at the same time");
$("body").css("background-color", "orange");
}
}
});
Raw
styles.css
body{
font-family: "Slabo 27px";
text-align: center;
}
#describe {
font-size: 20px;
}
.logo {
position:relative;
}
.logo img {
position:relative;
width:100%;
height:auto;
}
.logo div {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding-top: 25%;
}
.logo a {
display: block;
margin: 0 auto;
}
.start {
text-align: center;
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: rgba(0,0,0,0.6);
padding: 25px 80px 25px 80px;
font-size: 50px;
font-family: "Slabo 27px";
}
#heading {
text-align: center;
font-family: "Slabo 27px";
font-size: 50px;
}
#answer1, #answer2{
text-align: center;
text-transform: uppercase;
position: relative;
margin-bottom: 15px;
color: #ffffff;
background-color: #00abb0;
padding: 25px 80px 25px 80px;
font-size: 20px;
font-family: "Slabo 27px";
}
#business {
float: right;
width: 550px;
}
#nature {
float: left;
width: 550px;
}
#job {
margin-top: 30px;
}
#counter {
position: absolute;
display: none;
padding: 10px 50px 10px 10px;
right: 20%;
font-family: "Slabo 27px";
background-color: #00abb0;
color: white;
border-radius: 15px;
}
.start:hover, #answer1:hover, #answer2:hover{
background-color: rgba(0, 20, 250, .5);
transition: all 1s;
}
.questions{
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment