added logic to display answer preview

.gitignore

@@ -1,3 +1,6 @@
+# ---> VIM
+*.swp
+
 # ---> Node
 # Logs
 logs

html/css/extra.css

@@ -17,3 +17,8 @@ tr.clickable:hover{
 	color: #aaa;
 	text-align: center;
 }
+
+label {
+	display: inline;
+	margin-left: 12px;
+}

html/index.html

@@ -52,6 +52,11 @@ var socket = io();
 // Init vars
 var username;
 var RANK_ICONS = ["🥇","🥈","🥉"];
+var config = {
+	categories: [],
+	answerPreview: true,
+	timer: 60,
+};
 
 // Init listeners
 
@@ -72,6 +77,9 @@ socket.on("LOBBY", function(users){
 		page += "<li>"+users[i]+"</li>";
 	}
 	page += "</ol>";
+	
+	// Config area
+	page += "<div id='config'></div>";
 
 	document.getElementById("main").innerHTML = page;
 
@@ -88,6 +96,81 @@ socket.on("LOBBY", function(users){
 	if(users.length < 2){
 		document.getElementById("button_lobby_start").style.display = "none";
 	}
+
+	reconstructConfig();
+});
+
+// CONFIG
+function updateConfig(){
+	// Create new config from inputs
+	c = {
+		categories: [],
+		timer: 60,
+		answerPreview: true,
+	}
+
+	// Get categories
+	for(var i=0; i<config.categories.length; i++){
+		var cat = {
+			id: config.categories[i].id,
+			name: config.categories[i].name,
+			enabled: config.categories[i].enabled,
+		};
+		cat.enabled = document.getElementById("config-categories-"+cat.id).checked;
+		c.categories.push(cat);
+	}
+
+	// Get timer
+	c.timer = document.getElementById("config-timer").value;
+
+	// Get preview
+	c.answerPreview = document.getElementById("config-preview").checked;
+
+	// Send to server
+	socket.emit("CONFIG", {config: c});
+}
+function reconstructConfig(){
+	var page = "";
+	page += "<hr>";
+
+	page += "<h3>Game Config</h3>";
+
+	page += "<div>";
+	page += "<h5>Timer</h5>";
+	page += "<p>Number of seconds each player has to complete each step of the game.</p>";
+	page += "<input type='number' name='config-timer' id='config-timer' value='"+config.timer+"' onchange='updateConfig()' />";
+	page += "</div>";
+
+	page += "<hr>";
+
+	page += "<div>";
+	page += "<h5>Answer Preview</h5>";
+	page += "<p>Whether to display one of the possible answers to a question while writing false answers. This may help with formatting of the false answers.</p>";
+	page += "<span>";
+	page += "<input type='checkbox' name='config-preview' id='config-preview' "+(config.answerPreview ? "checked" : "")+" onchange='updateConfig()' />";
+	page += "<label for='config-preview'>Answer Preview</label>";
+	page += "</span>";
+	page += "</div>";
+
+	page += "<hr>";
+
+	page += "<div>";
+	page += "<h5>Categories</h5>";
+	for(var i=0; i<config.categories.length; i++){
+		page += "<span>";
+		page += "<input type='checkbox' name='config-categories' id='config-categories-"+config.categories[i].id+"' value='"+config.categories[i].id+"' "+(config.categories[i].enabled?"checked":"")+" onchange='updateConfig()' />";
+		page += "<label for='config-categories-"+config.categories[i].id+"'>"+config.categories[i].name+"</label>";
+		page += "</span>";
+		page += "<br>";
+	}
+	page += "</div>";
+
+	document.getElementById("config").innerHTML = page;
+}
+
+socket.on("CONFIG", function(data){
+	config = data.config;
+	reconstructConfig();
 });
 
 // LOBBY_CLOSED
@@ -130,6 +213,11 @@ socket.on("WRITE", function(data){
 
 	page += "<p>Question "+data.questionNr+" of "+data.questionsTotal+"</p>";
 	page += "<h4>"+data.question+"</h4>";
+
+	if(data.answerPreview !== null){
+		page += "<p>One of the existing answers is:<br><b>"+data.answerPreview+"</b></p>";
+	}
+
 	page += "<p>Enter a <b>false</b> answer.</p>";
 	page += "<input type='text' placeholder='Wrong answer' id='input_write' /><br/>";
 	page += "<p id='text_write_error' style='display: none; color: #BB2266; '></p>";

main.js

@@ -25,8 +25,8 @@ const util = require("util");
 const fetch = require("node-fetch");
 
 // Vars
-const hostname = "192.168.0.128"; // Enter your local IP address here
-const port = 3000; // Enter a port number here
+const hostname = "127.0.0.1"; // Enter your local IP address here
+const port = 5000; // Enter a port number here
 
 const STATE_LOBBY = 0;
 const STATE_MANUAL = 10;
@@ -45,13 +45,45 @@ var questionsTotal = 10; // Total nr of questions
 var questionData = {};
 var questionCorrectAnswerIndex;
 var answers;
-const QUESTION_CATEGORIES = [9,15,16,17,18,19,20,22,23,27,28,30];
+const QUESTION_CATEGORIES = [9,15,16,17,18,19,20,22,23,27,28,30]; // Default enabled categories
 
 var userWrite = [];
 var userPick = [];
 var userPoints = [];
 
+var config = {
+	categories: [], // Filled in later
+	answerPreview: true,
+	timer: 60,
+};
+var enabledCategories = [];
 
+// Get question categories
+function isCategoryEnabledByDefault(id){
+	return QUESTION_CATEGORIES.includes(id);
+}
+fetch("https://opentdb.com/api_category.php")
+	.then(res => res.json()) // Convert to JSON
+	.then(json => {
+		// Question loaded
+		console.log("Fetched question categories from OpenTDB");
+		console.log(json);
+
+		// TODO: check response code
+
+		// Save data
+		var cats = [];
+		for(var i=0; i<json.trivia_categories.length; i++){
+			cats.push({
+				id: json.trivia_categories[i].id,
+				name: json.trivia_categories[i].name,
+				enabled: isCategoryEnabledByDefault(json.trivia_categories[i].id),
+			});
+		}
+		config.categories = cats;
+
+		console.log(config);
+	});
 
 // Create HTTP server
 const server = http.createServer((req, res) => {
@@ -120,12 +152,26 @@ io.on("connection", (socket) => {
 			// Send lobby data
 			userSockets.forEach(function(s){s.emit("LOBBY", userNames);});
 
+			// Send config to new user
+			socket.emit("CONFIG", {config: config});
+
 		}else{
 			// When can't enter
 			socket.emit("LOBBY_CLOSED");
 		}
 	});
 
+	// CONFIG
+	socket.on("CONFIG", (data) => {
+		console.log("CONFIG request");
+
+		// Update server config
+		config = data.config;
+
+		// Send new config to all users
+		userSockets.forEach(function(s){s.emit("CONFIG", {config: config});});
+	});
+
 	// START
 	socket.on("START", () => {
 		console.log("START request");
@@ -143,6 +189,14 @@ io.on("connection", (socket) => {
 			userPoints.push(0);
 		}
 
+		enabledCategories = [];
+		for(var i=0; i<config.categories.length; i++){
+			if(config.categories[i].enabled){
+				enabledCategories.push(config.categories[i].id);
+			}
+		}
+		enabledCategories.sort(() => rand(0, 100));
+
 		// Send game data
 		var dataUser = {usernames:userNames, questionsTotal:questionsTotal};
 		for(i=0; i<userSockets.length; i++){
@@ -280,7 +334,9 @@ function next(){
 		}else{
 			// Load new question
 			console.log("Loading new question...");
-			var category = QUESTION_CATEGORIES[rand(0, QUESTION_CATEGORIES.length)];
+
+			var category = enabledCategories[questionNr % enabledCategories.length];
+
 			fetch("https://opentdb.com/api.php?amount=1&type=multiple&category="+category)
 				.then(res => res.json()) // Convert to JSON
 				.then(json => {
@@ -293,8 +349,21 @@ function next(){
 					// Save data
 					questionData = json.results[0];
 
+					questionAnswers = [questionData.correct_answer];
+					for(var i=0; i<questionData.incorrect_answers.length; i++){
+						questionAnswers.push(questionData.incorrect_answers[i]);
+					}
+					answerPreview = (config.answerPreview ? questionAnswers[rand(0, questionAnswers.length)] : null);
+
 					// Send question to players
-					userSockets.forEach(function(s){s.emit("WRITE", {questionNr:questionNr, questionsTotal:questionsTotal, question:questionData.question});});
+					userSockets.forEach(function(s){
+						s.emit("WRITE", {
+							questionNr: questionNr,
+							questionsTotal: questionsTotal,
+							question: questionData.question,
+							answerPreview: answerPreview,
+						});
+					});
 				});
 		}
 

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Psych",
+  "name": "ReverseQuiz",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {