iiiiMerge branch 'master' of https://github.com/8-bit-sheep/lamb-quiz

8-bit-sheep · Aug 2, 2019 · fb78585 · fb78585
2 parents afce6b1 + fd3860e
commit fb78585
Show file tree

Hide file tree

Showing 13 changed files with 584 additions and 205 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Yle-logo.png b/Yle-logo.png
diff --git a/about.css b/about.css
@@ -0,0 +1,72 @@
+#about-container {
+  width: 50rem;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 5rem;
+}
+
+#headline {
+  display: flex;
+
+  width: 50rem;
+}
+
+h1 {
+  color: #7badb6;
+}
+
+img {
+  display: block;
+  width: auto;
+  height: auto;
+}
+
+.text {
+  font-size: 1.8rem;
+  margin-bottom: 3rem;
+  width: 50rem;
+  z-index: 2;
+  position: relative;
+  top: -5.5rem;
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+#family-pic {
+  width: 50rem;
+  z-index: 1;
+}
+#sheep {
+  width: 30rem;
+  height: 17rem;
+}
+
+:root {
+  background-color: black;
+}
+
+* {
+  color: white;
+}
+
+#continue-btn {
+  background-color: #7badb6;
+  color: white;
+  width: 30rem;
+}
+
+#yle-logo {
+  width: 5rem;
+}
+
+#made-possible {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 10rem;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>About</title>
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="about.css" />
+  </head>
+  <body>
+    <div id="about-container">
+      <div id="headline">
+        <h1>About this project...</h1>
+        <img src="sheep-logo.gif" alt="sheep logo" id="sheep" />
+      </div>
+
+      <img src="family-pic.jpg" alt="lamb family pic" id="family-pic" />
+      <div class="text">
+        <h4>
+          The Summer Lambs Project is a cooperation between 8-bit-sheep and Eija
+          Moisala at Yleisradio. The idea was to offer summer jobs to high
+          schoolers, teach them to code JavaScript and give them a sense of
+          working in tech. This *very cool* website is the product of that
+          summer. Enjoy!
+        </h4>
+      </div>
+      <a href="index.html?about=seen" class="btn" id="continue-btn"
+        >Continue to *very cool* quiz</a
+      >
+      <div id="made-possible">
+        <h4>Thank you</h4>
+        <img src="Yle-logo.png" alt="logo" id="yle-logo" />
+        <h4>for making this possible!</h4>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/app.css b/app.css
@@ -108,7 +108,8 @@ h4 {
   transform: translateY(-0.1rem);
   transition: transform 150ms;
 }
-.btn[disabled]:hover {
+.btn[disabled]:hover,
+#save-improvement-button[disabled]:hover {
   cursor: not-allowed;
   box-shadow: none;
   transform: none;

diff --git a/end.js b/end.js
@@ -6,7 +6,7 @@ const parseUrlParameters = parameter =>
     .reduce((acc, cur) => ({ ...acc, [cur[0]]: cur[1] }), {});
 
 const username = document.getElementById("username");
-const finalScore = document.getElementById("finalScore");
+finalScore = document.getElementById("finalScore");
 const mostRecentScore = localStorage.getItem("mostRecentScore");
 const saveScoreBtn = document.getElementById("saveScoreButton");
 const urlParams = parseUrlParameters(window.location.search);
@@ -20,7 +20,7 @@ const saveHighscore = e => {
 
   const rankingUrl = `https://script.google.com/macros/s/AKfycbwdGGPzI9JdH_6FN-na4boXQNZmGyv6y_690ErJc0Xhzd_CQ4A_/exec?contentId=${
     urlParams.contentId
-  }&score=${mostRecentScore}&name=${username.value}`;
+  }&name=${username.value}&score=${mostRecentScore}`;
   fetch(rankingUrl);
   setInterval(
     () =>

diff --git a/family-pic.jpg b/family-pic.jpg
diff --git a/game.css b/game.css
@@ -1,10 +1,10 @@
 .choice-container {
-    display: flex;
-    margin-bottom: 0.5rem;
-    width: 100%;
-    font-size: 1.8rem;
-    border: 0.1rem solid #7badb6;
-    background-color: white;
+  display: flex;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  font-size: 1.8rem;
+  border: 0.1rem solid #7badb6;
+  background-color: white;
 }
 
 .choice-text {
@@ -50,10 +50,10 @@
 }
 
 .episode-info {
-    width: 100%;
-    padding: 1rem 2rem;
-    text-align: center;
-    font-family: "Times New Roman", Times, serif;
+  width: 100%;
+  padding: 1rem 2rem;
+  text-align: center;
+  font-family: "Times New Roman", Times, serif;
 }
 
 #episodeName:hover {
@@ -91,30 +91,98 @@
 
 .segment-btn,
 .all-btn {
-    font-size: 1.8rem;
-    font-weight: 500;
-    background-color: white;
-    border: 0.1rem solid #7badb6;
-    box-shadow: none;
-    color: #a9431e;
-    padding: 1rem;
-    width: 100%;
-    text-align: left;
+  font-size: 1.8rem;
+  font-weight: 500;
+  background-color: white;
+  border: 0.1rem solid #7badb6;
+  box-shadow: none;
+  color: #a9431e;
+  padding: 1rem;
+  width: 100%;
+  text-align: left;
 }
 
 .segment-btn {
-    margin-top: 0.25rem;
+  margin-top: 0.25rem;
 }
 
 #all-btns {
-    padding: 0rem;
-    border-width: 0rem;
-    list-style: none;
-    margin-bottom: 1rem;
-    width: 100%;
+  padding: 0rem;
+  border-width: 0rem;
+  list-style: none;
+  margin-bottom: 1rem;
+  width: 100%;
 }
 
 .segment-btn:hover {
-    color: #a9431e;
+  color: #a9431e;
+}
+#red-answer {
+  color: red;
+}
+#correct-answer-box {
+  font-size: 1.8rem;
+  font-weight: 500;
+}
+input {
+}
+#improvement-input {
+  height: 10rem;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+#username-input {
+  margin-right: 2rem;
 }
 
+#email-input,
+#username-input {
+  font-size: 1.2rem;
+}
+
+#save-improvement-button,
+#improvement-btn {
+  width: 10rem;
+  height: 3rem;
+  background-color: white;
+  border-radius: 0.7rem;
+  color: #7badb6;
+  border: 0.1rem solid #7badb6;
+  font-size: 1.4rem;
+}
+#personal-info {
+  width: 100%;
+}
+#improvement-form {
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+#improvement-btn {
+  width: 20rem;
+  font-size: 1.2rem;
+  height: 2rem;
+  margin-bottom: 1.7rem;
+}
+#exit-improvement {
+  position: relative;
+  z-index: 2;
+  left: -20.3rem;
+  top: 3.4rem;
+  box-shadow: 0 0.2rem 0.4rem 0 rgba(123, 173, 182, 0.5);
+}
+#improvement-thnx {
+  color: #a9431e;
+  animation: fade 1.5s ease-out 2.6s;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}