const content = document.getElementById("content");
const audios = document.getElementById("audios");
const answerButton = document.getElementById("submit");

const select = document.createElement("select");

const messageText = document.getElementById("message");

let realAnswer = "";

function checkAnswer() {
	messageText.hidden = false;
	if (select.value === realAnswer) {
		messageText.innerText = "Bravo !";
	} else {
		messageText.innerText = "Dommage, la réponse était : " + realAnswer;
	}
}

function addAudio(data) {
	const audio = document.createElement("audio");
	audio.controls = true;
	audio.src = "data:audio/ogg;base64," + data;
	audios.append(audio);
}

function updateAudios(response) {
	addAudio(response.dataOne);
	addAudio(response.dataTwo);
	addAudio(response.dataThree);
	addAudio(response.dataFour);

	content.append(document.createElement("br"));

	response.answers.forEach(element => {
		const option = document.createElement("option");
		option.innerText = element;
		select.append(option);
	});
	content.append(select);

	realAnswer = response.answer;
	answerButton.disabled = false;
}

fetch("/newchallenge", {
	method: "POST"
})
.then((response) => response.json())
.then((json) => updateAudios(json));