diff --git a/highscores.js b/highscores.js index 0d057f8..035d5d5 100644 --- 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 => - ` + highscoreList.innerHTML = ranking + .map( + row => + ` ${row.name.substring( - 0, - 16 - )}${row.score}` - ) - .join(""); - - d3.csv( - "https://docs.google.com/spreadsheets/d/e/2PACX-1vSfBk-rwrIauBPn7iuoLXBxP2sSYOXRYCbJ2GflzSK6wxGVGDr_fAqORJ0JWPdajFLxnGegmrlI26HB/pub?output=csv" + 0, + 16 + )}${row.score}` ) - .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 new file mode 100644 index 0000000..e69de29 diff --git a/user-questions.html b/user-questions.html new file mode 100644 index 0000000..43f35c5 --- /dev/null +++ b/user-questions.html @@ -0,0 +1,47 @@ + + + + + + + Your Question + + + +
+
+

Your Question Contribution

+

+ 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? +

+
+

Choose segment

+ +

The question

+ + + + + +

Indicate correct answer:

+ +

Can be an open question?

+ + + +
+ + Go Home +
+
+ + + + diff --git a/user-questions.js b/user-questions.js new file mode 100644 index 0000000..d2d9e1f --- /dev/null +++ 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}`, + "" + ); +});