add feedback function, fix problems with keyboard

8-bit-sheep · Jul 31, 2019 · 0160780 · 0160780
1 parent 5b9e561
commit 0160780
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 2 deletions.
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/game.css b/game.css
@@ -124,3 +124,65 @@
   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;
+  }
+}
diff --git a/game.html b/game.html
@@ -70,6 +70,47 @@ <h2 id="question"></h2>
                                     <span id="red-answer"></span>
                                 </div>
                             </form>
+                            <button id="improvement-btn" class= "hidden">This question needs improvement</button>
+                            <button            
+                                    class="hidden"
+                                    id="exit-improvement"
+                                >X</button>
+                            <form id="improvement-form" class="hidden">
+
+                                <input
+                                type="text"
+                                name="improvement"
+                                id="improvement-input"
+                                placeholder="How could this question be improved?"
+                                />
+
+                                <div id="personal-info">
+                                    <input
+                                    type="text"
+                                    name="username"
+                                    id="username-input"
+                                    placeholder="Name"
+                                    />
+                                    <input
+                                    type="text"
+                                    name="email"
+                                    id="email-input"
+                                    placeholder="Email"
+                                    />
+                                </div>
+
+                                <button            
+                                    type="submit"
+                                    class=""
+                                    id="save-improvement-button"
+                                    onclick="saveImprovement(event)"
+                                    disabled
+                                >
+                                    Submit
+                                </button>
+
+                            </form>
+                            <h4 id="improvement-thnx" class="hidden">Thank you for improving our application!:)</h4>
                         </div>
                     </div>
                 </div>

diff --git a/game.js b/game.js
@@ -26,6 +26,14 @@ const saveAnswerBtn = document.getElementById("saveAnswerButton");
 const openAnswerInput = document.getElementById("answer");
 const correctAnswerBox = document.getElementById("correct-answer-box");
 const redAnswer = document.getElementById("red-answer");
+const improvementBtn = document.getElementById("improvement-btn");
+const improvementForm = document.getElementById("improvement-form");
+const exitImprovement = document.getElementById("exit-improvement");
+const usernameInput = document.getElementById("username-input");
+const feedback = document.getElementById("improvement-input");
+const emailInput = document.getElementById("email-input");
+const saveImprovementBtn = document.getElementById("save-improvement-button");
+const improvementThnx = document.getElementById("improvement-thnx");
 
 // state
 let currentQuestion = {};
@@ -107,6 +115,7 @@ const startSegmentGame = e => {
 };
 
 const getNewQuestion = () => {
+  improvementBtn.classList.remove("hidden");
   continueToNext = false;
   if (availableQuestions.length === 0 || questionCounter > maxQuestions - 1) {
     localStorage.setItem("mostRecentScore", score);
@@ -250,7 +259,7 @@ const keyboardMap = {
 };
 
 const keypress = kp => {
-  if (currentQuestion.open === "TRUE") return;
+  if (currentQuestion.open === "TRUE" || !keyboardMap[kp]) return;
   if (!acceptingAnswers | continueToNext) {
     continueGame();
   } else {
@@ -282,6 +291,47 @@ const incrementScore = num => {
   scoreText.innerText = score;
 };
 
+improvementBtn.addEventListener("click", e => {
+  improvementForm.classList.remove("hidden");
+  exitImprovement.classList.remove("hidden");
+});
+
+exitImprovement.addEventListener("click", e => {
+  improvementForm.classList.add("hidden");
+  exitImprovement.classList.add("hidden");
+});
+
+filledForm = () => !(usernameInput.value && feedback.value && emailInput.value);
+usernameInput.addEventListener(
+  "keyup",
+  () => (saveImprovementBtn.disabled = filledForm())
+);
+emailInput.addEventListener(
+  "keyup",
+  () => (saveImprovementBtn.disabled = filledForm())
+);
+feedback.addEventListener(
+  "keyup",
+  () => (saveImprovementBtn.disabled = filledForm())
+);
+
+saveImprovement = e => {
+  e.preventDefault();
+  const saveImprovementUrl = `https://script.google.com/macros/s/AKfycbwXBGlvexKjpcZ9ccWN3o4lrm4_DnKvTuTYfHE2o7_QmrgcveDf/exec?nickname=${
+    usernameInput.value
+  }&feedback=${feedback.value}&question=${currentQuestion.question}&email=${
+    emailInput.value
+  }`;
+  fetch(saveImprovementUrl);
+  improvementForm.classList.add("hidden");
+  exitImprovement.classList.add("hidden");
+  improvementBtn.classList.add("hidden");
+  improvementThnx.classList.remove("hidden");
+  setTimeout(() => {
+    improvementThnx.classList.add("hidden");
+  }, 4000);
+};
+
 d3.csv(
   "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv"
 ).then(data => {