created page for user-generated questions

8-bit-sheep · Jul 22, 2019 · fa5f0ef · fa5f0ef
1 parent 6c4667d
commit fa5f0ef
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 44 deletions.
diff --git a/highscores.js b/highscores.js
@@ -1,51 +1,44 @@
 const parseUrlParameters = parameter =>
-      parameter //"?key1=value1&key2=value2&key3=value3"
-      .substr(1) //"key1=value1&key2=value2&key3=value3"
-      .split("&") //["key1=value1" "key2=value2" key3=value3"]
-      .map(el => el.split("=")) //[["key1" "value1"] ["key2" "value2"] [key3" "value3"]]
-      .reduce((acc, cur) => ({ ...acc, [cur[0]]: cur[1] }), {}); //{key1: value1, key2: value2, key3, value3}
+  parameter //"?key1=value1&key2=value2&key3=value3"
+    .substr(1) //"key1=value1&key2=value2&key3=value3"
+    .split("&") //["key1=value1" "key2=value2" key3=value3"]
+    .map(el => el.split("=")) //[["key1" "value1"] ["key2" "value2"] [key3" "value3"]]
+    .reduce((acc, cur) => ({ ...acc, [cur[0]]: cur[1] }), {}); //{key1: value1, key2: value2, key3, value3}
 
+d3.csv(
+  "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKBOji3CenMyR-hvdBIBZTYL82uHhMHOoUIbiK1XYr2CycXkVBY96aWeVnfp77mkELAlNIR0Dk934g/pub?output=csv"
+).then(highscores => {
+  const params = parseUrlParameters(window.location.search);
+  const id = params.contentId;
+  let ranking = highscores.filter(x => x.contentId === id);
+  let exists = ranking
+    .filter(x => x.name === params.name)
+    .map(y => y.score)
+    .filter(x => x === params.score).length;
+  if ((exists === 0) & params.name) ranking.push(params);
+  ranking = ranking
+    .sort((a, b) => parseInt(b.score) > parseInt(a.score))
+    .slice(0, 10);
+  const highscoreList = document.getElementById("highscoreList");
+  let contentName = document.getElementById("contentName");
 
-d3.csv(    "https://docs.google.com/spreadsheets/d/e/2PACX-1vTKBOji3CenMyR-hvdBIBZTYL82uHhMHOoUIbiK1XYr2CycXkVBY96aWeVnfp77mkELAlNIR0Dk934g/pub?output=csv"
-      )
-  .then(highscores => {
-    const params = parseUrlParameters(window.location.search);
-    const id = params.contentId;
-    let ranking = highscores.filter(x => x.contentId === id)
-    const exists = ranking
-      .filter(x => x.name === params.name)
-      .map(y => y.score)
-      .filter(x => x === params.score)
-      .length;
-      if (exists === 0 & params.name) ranking.push(params);
-      ranking = ranking.sort((a, b) => parseInt(b.score) > parseInt(a.score)).slice(0,10);
-      const highscoreList = document.getElementById("highscoreList");
-      let contentName = document.getElementById("contentName");
-
-      highscoreList.innerHTML = ranking
-      .map(
-        row =>
-          `<tr>
+  highscoreList.innerHTML = ranking
+    .map(
+      row =>
+        `<tr>
     <th class="highscoreNames">${row.name.substring(
-            0,
-            16
-          )}</th><th class="highscoreScores">${row.score}</th></tr>`
-      )
-      .join("");
-
-    d3.csv(
-      "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv"
+      0,
+      16
+    )}</th><th class="highscoreScores">${row.score}</th></tr>`
     )
-      .then(
-        names => {
-          console.log(id)
-          const contentNames = (id !== "0") ?
-            names.filter(x => x.contentId === id)[0].content :
-            "All";
-
-          contentName.innerText = contentNames;
-        }
-      )
+    .join("");
 
+  d3.csv(
+    "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv"
+  ).then(names => {
+    const contentNames =
+      id !== "0" ? names.filter(x => x.contentId === id)[0].content : "All";
 
-  })
+    contentName.innerText = contentNames;
+  });
+});
diff --git a/user-questions.css b/user-questions.css
diff --git a/user-questions.html b/user-questions.html
@@ -0,0 +1,47 @@
+<!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>Your Question</title>
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <div class="container">
+      <div id="userGenerated" class="flex-center flex-column">
+        <h1>Your Question Contribution</h1>
+        <h3 id="brief">
+          Before we start, please contribute one question from Crash Course
+          Computer Scinece. What is the most surprising piece of information
+          that you want people to learn?
+        </h3>
+        <form>
+          <h3>Choose segment</h3>
+          <select id="contentSelector" name="contentSegment"> </select>
+          <h3>The question</h3>
+          <input type="text" name="question" value="Your Question" />
+          <input type="text" name="choice1" value="Choice 1" />
+          <input type="text" name="choice2" value="Choice 2" />
+          <input type="text" name="choice3" value="Choice 3" />
+          <input type="text" name="choice4" value="Choice 4" />
+          <h3>Indicate correct answer:</h3>
+          <select name="answer">
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+          </select>
+          <h3>Can be an open question?</h3>
+          <input type="checkbox" name="open" value="true" />
+
+          <input class="btn" type="submit" value="Submit" />
+        </form>
+
+        <a class="btn" href="index.html">Go Home</a>
+      </div>
+    </div>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="user-questions.js"></script>
+  </body>
+</html>
diff --git a/user-questions.js b/user-questions.js
@@ -0,0 +1,22 @@
+d3.csv(
+  "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv"
+).then(data => {
+  const contentId = window.location.search.substr(1).split("=")[1];
+  const contentSegments = [
+    ...new Set(
+      data.filter(el => el.contentId === contentId).map(e => e.contentSegment)
+    )
+  ];
+  const contentName = data.filter(el => el.contentId === contentId)[0].content;
+  const briefText = document.getElementById("brief");
+  const questionCriteria = ["significant", "interesting", "surprising"];
+  briefText.innerText = `Before we start, please contribute one question about ${contentName}. What is the most ${
+    questionCriteria[[Math.floor(Math.random() * questionCriteria.length)]]
+  } piece of information that you want people to learn?`;
+
+  const contentSelector = document.getElementById("contentSelector");
+  contentSelector.innerHTML = contentSegments.reduce(
+    (acc, curr) => `${acc}<option value="${curr}">${curr}</option>`,
+    ""
+  );
+});