MediaWiki:Quiz.js

'use strict'

var enemies = [
	"Creeping Chrysanthemum",
	"Gatling Groink",
	"Lesser Spotted Jellyfloat",
	"Dwarf Red Bulborb",
	"Shearwig",
	"Toady Bloyster",
	"Yellow Wollywog",
	"Burrowing Snagret",
	"Ravenous Whiskerpillar",
	"Cloaking Burrow-nit"
]

var notes = [
	"When thinly sliced, this predator's sizeable bulb makes a sumptuous pizza topping.",
	"Remove the cannon and ammo stockpile, then vigorously tenderize the meat with a heavy mallet. Stir-fry with caramelized onions and figwort sprouts. Spoon over a steaming bowl of fluffy white rice and douse with chili sauce.",
	"Similar in taste and texture to gelatin, this jiggling mass of jelly can be sculptured into all kinds of creative shapes. As a bonus, it also doubles as professional-grade hair gel. It's the perfect cool summer treat!",
	"For a blissful bisque, mince the entire beast finely and stir in with heavy cream, artichoke hearts, and a pinch of black pepper. Heat slowly until piping hot. Mmmmm... Rich and creamy!",
	"Grate this beast into a zest and whisk with sugar, cream, and chopped dark chocolate for a lusciously indulgent mousse that's a true culinary coup de grace!",
	"Pan-sear the herbs and oil until lightly crusted on the outside and rosy on the inside. Complement the savory flavors with a light and buttery creme sauce.",
	"Beer-batter and deep-fry for a down-home flavor you won't soon forget!",
	"Slice the serpentine torso into thin medallions, skewer on a metal rod with Hocotate onions, and barbecue over an open flame.",
	"Delicious skillet-seared or sauteed with scallions and a red Genovese sauce.",
	"Boil in the shell with a pinch of salt until bright red, and serve piping hot with tartar sauce."
]

// Set up the HTML
document.getElementById("pikipedia-quiz").innerHTML = "<p>Which enemy does this note belong to?</p><select><option>Louie's notes</option></select><p id='note'></p><input type='radio' name='selection' id='radio0'> <label for='radio0'><span id='option0'></span></label><br><input type='radio' name='selection' id='radio1'> <label for='radio1'><span id='option1'></span></label><br><input type='radio' name='selection' id='radio2'> <label for='radio2'><span id='option2'></span></label><br><input type='radio' name='selection' id='radio3'> <label for='radio3'><span id='option3'></span></label><br><br><button type='button' id='check'>Check</button><p id='result'></p>";

var i;
var selectednote; // Refers to a position in the enemies and notes arrays
var correctoption; // Refers to a position in the options array
var options = [100, 100, 100, 100]; // Initialized with a number outside the range of the enemies and notes arrays
var checkoption;

// Pick which enemy will be correct and set it to a random option
selectednote = Math.floor(Math.random() * notes.length);
correctoption = Math.floor(Math.random() * 4);
options[correctoption] = selectednote;
console.log(selectednote);

// Fill the rest of the options with other enemies without duplicates
for (i = 0; i < 4; i += 1) {
	if (i !== correctoption) {
		checkoption = Math.floor(Math.random() * notes.length);
		while (options.includes(checkoption)) {
			checkoption = Math.floor(Math.random() * notes.length);
		}
		options[i] = checkoption;
	}
}
console.log(options);

// Set the text for the buttons
document.getElementById("note").innerText = notes[selectednote];
document.getElementById("option0").innerText = enemies[options[0]];
document.getElementById("option1").innerText = enemies[options[1]];
document.getElementById("option2").innerText = enemies[options[2]];
document.getElementById("option3").innerText = enemies[options[3]];

// Check if the player selected the right button
document.getElementById("check").addEventListener("click", check);

function check() {
	if (document.getElementById("radio0").checked == true) {
		if (correctoption == 0) {
			document.getElementById("result").innerText = "Correct!";
		} else {
			document.getElementById("result").innerText = "Incorrect.";
		}
	} else if (document.getElementById("radio1").checked == true) {
		if (correctoption == 1) {
			document.getElementById("result").innerText = "Correct!";
		} else {
			document.getElementById("result").innerText = "Incorrect.";
		}
	} else if (document.getElementById("radio2").checked == true) {
		if (correctoption == 2) {
			document.getElementById("result").innerText = "Correct!";
		} else {
			document.getElementById("result").innerText = "Incorrect.";
		}
	} else if (document.getElementById("radio3").checked == true) {
		if (correctoption == 3) {
			document.getElementById("result").innerText = "Correct!";
		} else {
			document.getElementById("result").innerText = "Incorrect.";
		}
	} else {
		document.getElementById("result").innerText = "No option selected!";
	}
}