Javascript Como fazer isso com os valores das variáveis?

Eduardo de Quadros · 22 de maio de 2022

Quando eu atualizo a página, os valores das variáveis JavaScript voltam para seu valor inicial. Mas quando atualiza a página, eu quero que os valores das variáveis continuam os mesmos.

<?php
	if($_SERVER["HTTPS"] != "on" || $_SERVER["HTTP_HOST"] == "eduardodequadros.site") header("Location: https://www.eduardodequadros.site" . $_SERVER["REQUEST_URI"]);
	session_start();
	if(!isset($_SESSION['nome_completo_aluno_jogo_deep_freeze'])) $_SESSION['nome_completo_aluno_jogo_deep_freeze'] = "";
?>
<!DOCTYPE html>
<html lang="pt" xml:lang="pt" xmlns="http://www.w3.org/1999/xhtml" translate="yes">
	<head>
		<meta charset="utf-8">
		<title>Eduardo de Quadros</title>
		<link rel="stylesheet" type="text/css" href="https://www.eduardodequadros.site/infoprodutos/lib/nuevo/videojs/skins/nuevo/videojs.min.css">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
		<link rel="stylesheet" type="text/css" href="https://www.eduardodequadros.site/style.css">
		<script src="https://polyfill.io/v3/polyfill.min.js?version=3.111.0&features=Intl.DateTimeFormat%2CIntl.DateTimeFormat.prototype.formatToParts%2CIntl.DateTimeFormat.%7EtimeZone.all%2CIntl.DateTimeFormat.%7EtimeZone.golden%2CIntl.DisplayNames%2CIntl.ListFormat%2CIntl.Locale%2CIntl.NumberFormat%2CIntl.PluralRules%2CIntl.RelativeTimeFormat%2CIntl.getCanonicalLocales"></script>
		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
		<script>
			var nomeCompletoAlunoVar = "<?php echo $_SESSION['nome_completo_aluno_jogo_deep_freeze']; ?>";
			var tentativaEmProgressoNaProva = false;
			var tentativaCorrigidaNaProva = false;
			var btnLoginOuLogout;
			var nomeCompletoAlunoCampo;
			var formLoginAluno;
			var itensCurso;
			var spanNota;
			var btnEnviarProva;
			var btnNovaTentativa;
			var campos;
			var sessoinsItens;
			var notaNaProva = -1;
			var btnLoginOuLogout;

			function pegarLoginOuLogout(){
				btnLoginOuLogout = document.getElementById("btn_login_ou_logout");
				nomeCompletoAlunoCampo = document.getElementById("campo_nome_completo_aluno");
				formLoginAluno = document.getElementById("form_login_aluno");
				itensCurso = document.getElementById("itens_curso");
				spanNota = document.getElementById("span_nota");
				btnEnviarProva = document.getElementById("btn_enviar_prova");
				btnNovaTentativa = document.getElementById("btn_nova_tentativa");
				campos = document.querySelectorAll("#prova_curso form input[type='number'], #prova_curso form select");
				sessoinsItens = [document.getElementById("login_aluno"), document.getElementById("conteudo_curso"), document.getElementById("prova_curso"), document.getElementById("certificado_conclusaum")];
				btnLoginOuLogout = document.getElementById("btn_login_ou_logout");

				if(nomeCompletoAlunoVar == ""){
					btnLoginOuLogout.innerHTML = "Login";
					nomeCompletoAlunoCampo.value = nomeCompletoAlunoVar;
					nomeCompletoAlunoCampo.readOnly = false;
					nomeCompletoAlunoCampo.required = true;
					formLoginAluno.action = "login.php";
					itensCurso.options[1].disabled = true;
					itensCurso.options[2].disabled = true;
				}
				else{
					btnLoginOuLogout.innerHTML = "Logout";
					nomeCompletoAlunoCampo.value = nomeCompletoAlunoVar;
					nomeCompletoAlunoCampo.required = false;
					nomeCompletoAlunoCampo.readOnly = true;
					formLoginAluno.action = "logout.php";
					itensCurso.options[1].disabled = false;
					itensCurso.options[2].disabled = false;
					if (notaNaProva == -1) {
					    spanNota.innerHTML = "ainda indefinida";
					}
					if(tentativaEmProgressoNaProva && !tentativaCorrigidaNaProva){
						itensCurso.options[0].disabled = true;
						itensCurso.options[1].disabled = true;
						itensCurso.options[2].selected = true;
						for(var j = 0; j < sessoinsItens.length; j++) sessoinsItens[j].hidden = true;
						sessoinsItens[2].hidden = false;
						btnEnviarProva.disabled = false;
						btnNovaTentativa.disabled = true;
					}
					else if(!tentativaEmProgressoNaProva && tentativaCorrigidaNaProva){
						if(spanNota.innerHTML == "ainda indefinida" || Number(spanNota.innerHTML) < notaNaProva) spanNota.innerHTML = notaNaProva;
						btnEnviarProva.disabled = true;
						itensCurso.options[0].disabled = false;
						itensCurso.options[1].disabled = false;
						for(var i = 0; i < campos.length; i++){
							campos[i].disabled = true;
						}
						if(Number(spanNota.innerHTML) >= 800){
							itensCurso.options[3].disabled = false;
							btnNovaTentativa.disabled = true;
						}
						else{
							btnNovaTentativa.disabled = false;
						}
					}
				}
			}

			function mudarItemCurso(){
				for(var i = 0; i < itensCurso.options.length; i++) if(itensCurso.options[i].selected) switch (i) {
					case 0:
						for(var j = 0; j < sessoinsItens.length; j++) sessoinsItens[j].hidden = true;
						sessoinsItens[i].hidden = false;
						break;
					case 1:
						for(var j = 0; j < sessoinsItens.length; j++) sessoinsItens[j].hidden = true;
						sessoinsItens[i].hidden = false;
						break;
					case 2:
						for(var j = 0; j < sessoinsItens.length; j++) sessoinsItens[j].hidden = true;
						sessoinsItens[i].hidden = false;
						if(!tentativaCorrigidaNaProva){
							tentativaEmProgressoNaProva = true;
							itensCurso.options[0].disabled = true;
							itensCurso.options[1].disabled = true;
							btnEnviarProva.disabled = false;
							btnNovaTentativa.disabled = true;
						}
						else if(!tentativaEmProgressoNaProva){
							if(spanNota.innerHTML == "ainda indefinida" || Number(spanNota.innerHTML) < notaNaProva) spanNota.innerHTML = notaNaProva;
							btnEnviarProva.disabled = true;
							itensCurso.options[0].disabled = false;
							itensCurso.options[1].disabled = false;
							for(var j = 0; j < campos.length; j++){
								campos[j].disabled = true;
							}
							if(Number(spanNota.innerHTML) >= 800){
								itensCurso.options[3].disabled = false;
								btnNovaTentativa.disabled = true;
							}
							else{
								btnNovaTentativa.disabled = false;
							}
						}
						break;
					case 3:
						for(var j = 0; j < sessoinsItens.length; j++) sessoinsItens[j].hidden = true;
						sessoinsItens[i].hidden = false;
						if(document.getElementById("data_atual_certificado").innerHTML == "") document.getElementById("data_atual_certificado").innerHTML = "<?php echo (new DateTime("now", new DateTimeZone("America/Sao_Paulo")))->format("d/m/Y H:i:s.v"); ?>";
						break;
				}
			}

			function novaTentativaDaProva(){
				tentativaCorrigidaNaProva = false;
				tentativaEmProgressoNaProva = true;
				itensCurso.options[0].disabled = true;
				itensCurso.options[1].disabled = true;
				btnEnviarProva.disabled = false;
				btnNovaTentativa.disabled = true;
				for(var j = 0; j < campos.length; j++){
					campos[j].disabled = false;
					campos[j].value = 1;
				}
			}

			function calcularNota(){
				var questaum01_menu_input = document.getElementById("questaum01_menu_input");
				var questaum01_mundo1_input = document.getElementById("questaum01_mundo1_input");
				var questaum01_mundo2_input = document.getElementById("questaum01_mundo2_input");
				var questaum01_mundo3_input = document.getElementById("questaum01_mundo3_input");
				var questaum01_mundo4_input = document.getElementById("questaum01_mundo4_input");
				var questaum01_vitoria_input = document.getElementById("questaum01_vitoria_input");
				var questaum02_clica_botaum_input = document.getElementById("questaum02_clica_botaum_input");
				var questaum02_pula_plataforma_baixo_input = document.getElementById("questaum02_pula_plataforma_baixo_input");
				var questaum02_atira_gelo_input = document.getElementById("questaum02_atira_gelo_input");
				var questaum02_bola_gelo_bate_input = document.getElementById("questaum02_bola_gelo_bate_input");
				var questaum02_destroi_input = document.getElementById("questaum02_destroi_input");
				var questaum02_ganha_pontos_input = document.getElementById("questaum02_ganha_pontos_input");
				var questaum02_ganha_poder_input = document.getElementById("questaum02_ganha_poder_input");
				var questaum02_derrota_input = document.getElementById("questaum02_derrota_input");
				var questaum03_select_assertiva1 = document.getElementById("questaum03_select_assertiva1");
				var questaum03_select_assertiva2 = document.getElementById("questaum03_select_assertiva2");
				var questaum03_select_assertiva3 = document.getElementById("questaum03_select_assertiva3");
				var questaum03_select_assertiva4 = document.getElementById("questaum03_select_assertiva4");
				var questaum04_select_assertiva1 = document.getElementById("questaum04_select_assertiva1");
				var questaum04_select_assertiva2 = document.getElementById("questaum04_select_assertiva2");
				var questaum04_select_assertiva3 = document.getElementById("questaum04_select_assertiva3");
				var questaum04_select_assertiva4 = document.getElementById("questaum04_select_assertiva4");
				var questaum05_select_assertiva1 = document.getElementById("questaum05_select_assertiva1");
				var questaum05_select_assertiva2 = document.getElementById("questaum05_select_assertiva2");
				var questaum05_select_assertiva3 = document.getElementById("questaum05_select_assertiva3");
				var questaum05_select_assertiva4 = document.getElementById("questaum05_select_assertiva4");
				var questaum06_select_assertiva1 = document.getElementById("questaum06_select_assertiva1");
				var questaum06_select_assertiva2 = document.getElementById("questaum06_select_assertiva2");
				var questaum06_select_assertiva3 = document.getElementById("questaum06_select_assertiva3");
				var questaum06_select_assertiva4 = document.getElementById("questaum06_select_assertiva4");
				var questaum06_select_assertiva5 = document.getElementById("questaum06_select_assertiva5");
				var questaum06_select_assertiva6 = document.getElementById("questaum06_select_assertiva6");
				var questaum07_select = document.getElementById("questaum07_select");
				var questaum08_select_assertiva1 = document.getElementById("questaum08_select_assertiva1");
				var questaum08_select_assertiva2 = document.getElementById("questaum08_select_assertiva2");
				var questaum08_select_assertiva3 = document.getElementById("questaum08_select_assertiva3");
				var questaum08_select_assertiva4 = document.getElementById("questaum08_select_assertiva4");
				var questaum08_select_assertiva5 = document.getElementById("questaum08_select_assertiva5");
				var questaum08_select_assertiva6 = document.getElementById("questaum08_select_assertiva6");
				var questaum08_select_assertiva7 = document.getElementById("questaum08_select_assertiva7");
				var questaum08_select_assertiva8 = document.getElementById("questaum08_select_assertiva8");
				var questaum09_select_assertiva1 = document.getElementById("questaum09_select_assertiva1");
				var questaum09_select_assertiva2 = document.getElementById("questaum09_select_assertiva2");
				var questaum09_select_assertiva3 = document.getElementById("questaum09_select_assertiva3");
				var questaum09_select_assertiva4 = document.getElementById("questaum09_select_assertiva4");
				var questaum10_select_assertiva1 = document.getElementById("questaum10_select_assertiva1");
				var questaum10_select_assertiva2 = document.getElementById("questaum10_select_assertiva2");
				var questaum10_select_assertiva3 = document.getElementById("questaum10_select_assertiva3");
				var questaum10_select_assertiva4 = document.getElementById("questaum10_select_assertiva4");
				var questaum11_input = document.getElementById("questaum11_input");
				if(!tentativaCorrigidaNaProva && tentativaEmProgressoNaProva){
					tentativaEmProgressoNaProva = false;
					tentativaCorrigidaNaProva = true;
					notaNaProva = 0;
					if(questaum01_menu_input.value == 2) notaNaProva += 20;
					if(questaum01_mundo1_input.value == 4) notaNaProva += 20;
					if(questaum01_mundo2_input.value == 6) notaNaProva += 20;
					if(questaum01_mundo3_input.value == 5) notaNaProva += 20;
					if(questaum01_mundo4_input.value == 3) notaNaProva += 20;
					if(questaum01_vitoria_input.value == 1) notaNaProva += 20;
					if(questaum02_clica_botaum_input.value == 6) notaNaProva += 20;
					if(questaum02_pula_plataforma_baixo_input.value == 2) notaNaProva += 20;
					if(questaum02_atira_gelo_input.value == 7) notaNaProva += 20;
					if(questaum02_bola_gelo_bate_input.value == 4) notaNaProva += 20;
					if(questaum02_destroi_input.value == 3) notaNaProva += 20;
					if(questaum02_ganha_poder_input.value == 5) notaNaProva += 20;
					if(questaum02_ganha_pontos_input.value == 1) notaNaProva += 20;
					if(questaum02_derrota_input.value == 8) notaNaProva += 20;
					if(questaum03_select_assertiva1.value == 2) notaNaProva += 20;
					if(questaum03_select_assertiva2.value == 4) notaNaProva += 20;
					if(questaum03_select_assertiva3.value == 1) notaNaProva += 20;
					if(questaum03_select_assertiva4.value == 3) notaNaProva += 20;
					if(questaum04_select_assertiva1.value == 3) notaNaProva += 20;
					if(questaum04_select_assertiva2.value == 4) notaNaProva += 20;
					if(questaum04_select_assertiva3.value == 2) notaNaProva += 20;
					if(questaum04_select_assertiva4.value == 1) notaNaProva += 20;
					if(questaum05_select_assertiva1.value == 2) notaNaProva += 20;
					if(questaum05_select_assertiva2.value == 4) notaNaProva += 20;
					if(questaum05_select_assertiva3.value == 1) notaNaProva += 20;
					if(questaum05_select_assertiva4.value == 3) notaNaProva += 20;
					if(questaum06_select_assertiva1.value == 5) notaNaProva += 20;
					if(questaum06_select_assertiva2.value == 3) notaNaProva += 20;
					if(questaum06_select_assertiva3.value == 2) notaNaProva += 20;
					if(questaum06_select_assertiva4.value == 4) notaNaProva += 20;
					if(questaum06_select_assertiva5.value == 5) notaNaProva += 20;
					if(questaum06_select_assertiva6.value == 1) notaNaProva += 20;
					if(questaum07_select.value == 4) notaNaProva += 20;
					if(questaum08_select_assertiva1.value == 2) notaNaProva += 20;
					if(questaum08_select_assertiva2.value == 4) notaNaProva += 20;
					if(questaum08_select_assertiva3.value == 5) notaNaProva += 20;
					if(questaum08_select_assertiva4.value == 6) notaNaProva += 20;
					if(questaum08_select_assertiva5.value == 7) notaNaProva += 20;
					if(questaum08_select_assertiva6.value == 1) notaNaProva += 20;
					if(questaum08_select_assertiva7.value == 8) notaNaProva += 20;
					if(questaum08_select_assertiva8.value == 3) notaNaProva += 20;
					if(questaum09_select_assertiva1.value == 4) notaNaProva += 20;
					if(questaum09_select_assertiva2.value == 1) notaNaProva += 20;
					if(questaum09_select_assertiva3.value == 3) notaNaProva += 20;
					if(questaum09_select_assertiva4.value == 2) notaNaProva += 20;
					if(questaum10_select_assertiva1.value == 4) notaNaProva += 20;
					if(questaum10_select_assertiva2.value == 1) notaNaProva += 20;
					if(questaum10_select_assertiva3.value == 3) notaNaProva += 20;
					if(questaum10_select_assertiva4.value == 2) notaNaProva += 20;
					if(questaum11_input.value == 3) notaNaProva += 20;

					if(spanNota.innerHTML == "ainda indefinida" || Number(spanNota.innerHTML) < notaNaProva) spanNota.innerHTML = notaNaProva;
					btnEnviarProva.disabled = true;
					itensCurso.options[0].disabled = false;
					itensCurso.options[1].disabled = false;
					for(var j = 0; j < campos.length; j++){
						campos[j].disabled = true;
					}
					if(Number(spanNota.innerHTML) >= 800){
						itensCurso.options[3].disabled = false;
						btnNovaTentativa.disabled = true;
					}
					else{
						btnNovaTentativa.disabled = false;
					}
				}
			}
		</script>
	</head>
	<body onload="pegarLoginOuLogout();">
		<p><form><select id="itens_curso" onchange="mudarItemCurso();">
			<option selected>Login de Aluno</option>
			<option disabled>Conte&uacute;do do Curso</option>
			<option disabled>Prova do Curso</option>
			<option disabled>Certificado de Conclus&atilde;o</option>
		</select></form></p><br>
		<section id="login_aluno">
			<p><form method="post" id="form_login_aluno" action="login.php">
				<label for="campo_nome_completo_aluno">Seu nome completo: </label><input required type="text" name="nome_completo_aluno" id="campo_nome_completo_aluno"> <button type="submit" id="btn_login_ou_logout">Login</button>
			</form></p><br>
		</section>
		<section id="conteudo_curso" hidden>
			<script src="https://www.eduardodequadros.site/infoprodutos/lib/nuevo/videojs/vídeo.min.js"></script>
	    <script src="https://www.eduardodequadros.site/infoprodutos/lib/nuevo/videojs/nuevo.min.js"></script>
			<script src="https://www.eduardodequadros.site/infoprodutos/lib/nuevo/videojs/lang/pt-BR.js"></script>
			<div class="div_video">
				<vídeo id="conteudo_curso_deep_freeze" class="vídeo-js vjs-fluid" controls preload="auto" playsinline crossorigin="anonymous" poster="poster.png">
					<source type="vídeo/mp4" src="Curso%20Deep%20Freeze.mp4">
					<track src="deep_freeze_conteudo_chapters_pt.vtt" srclang="pt" kind="chapters">
				</vídeo>
			</div>
			<script>
				var nuevo_plugin_options = {
					chapterMarkers: true,
					downloadButton: false,
					resume: false,
					captionsSize: 1,
					rewindforward: 30
				};
				var nuevo_plugin_details = {
					language: "pt",
					playbackRates: [1]
				};
				var player = videojs("conteudo_curso_deep_freeze", nuevo_plugin_details);
				player.nuevo(nuevo_plugin_options);
			</script>
		</section>
		<section id="prova_curso" hidden>
			<ul>
				<li>N&atilde;o tem limite para a quantidade de tentativas ou para a duração das tentativas.</li>
				<li>S&oacute; pode ver o conte&uacute;do do curso ou fazer logout depois de terminar uma tentativa.</li>
				<li>A nota &eacute; de 0 a 1000.</li>
				<li>Fez v&aacute;rias tentativas, o m&eacute;todo de avalia&ccedil;&atilde;o &eacute; a nota mais alta.</li>
				<li>Tirando nota maior ou igual a 800, o aluno ganhar&aacute; o certificado.</li>
				<li>Todos os campos nesta prova valem 20 pontos.</li>
				<li>Sua nota: <span id="span_nota">ainda indefinida</span>.</li>
			</ul><br>
			<form>
				<h3>Quest&atilde;o 01</h3><br>
				<p>Sobre as m&uacute;sicas do jogo:</p><br>
				<p><vídeo width="640" class="video_classico" controls crossorigin="anonymous">
					<source type="vídeo/mp4" src="M%C3%BAsicas%20Deep%20Freeze.mp4">
				</vídeo></p><br>
				<ul>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_menu_input" name="questaum01_menu_input"><label for="questaum01_menu_input">: Menu</label></li>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_mundo1_input" name="questaum01_mundo1_input"><label for="questaum01_mundo1_input">: Mundo 1</label></li>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_mundo2_input" name="questaum01_mundo2_input"><label for="questaum01_mundo2_input">: Mundo 2</label></li>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_mundo3_input" name="questaum01_mundo3_input"><label for="questaum01_mundo3_input">: Mundo 3</label></li>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_mundo4_input" name="questaum01_mundo4_input"><label for="questaum01_mundo4_input">: Mundo 4</label></li>
					<li><input required type="number" min="1" max="6" value="1" id="questaum01_vitoria_input" name="questaum01_vitoria_input"><label for="questaum01_vitoria_input">: Vit&oacute;ria</label></li>
				</ul><br>
				<h3>Quest&atilde;o 02</h3><br>
				<p>Sobre os efeitos sonoros do jogo:</p><br>
				<p><vídeo width="640" class="video_classico" controls crossorigin="anonymous">
					<source type="vídeo/mp4" src="Efeitos%20Sonoros%20Deep%20Freeze.mp4">
				</vídeo></p><br>
				<ul>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_clica_botaum_input" name="questaum02_clica_botaum_input"><label for="questaum02_clica_botaum_input">: Clica em um Bot&atilde;o</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_pula_plataforma_baixo_input" name="questaum02_pula_plataforma_baixo_input"><label for="questaum02_pula_plataforma_baixo_input">: Pula ou Vai para a Plataforma Anterior</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_atira_gelo_input" name="questaum02_atira_gelo_input"><label for="questaum02_atira_gelo_input">: Atira Gelo</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_bola_gelo_bate_input" name="questaum02_bola_gelo_bate_input"><label for="questaum02_bola_gelo_bate_input">: Bola de Gelo Bate</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_destroi_input" name="questaum02_destroi_input"><label for="questaum02_destroi_input">: Destr&oacute;i</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_ganha_poder_input" name="questaum02_ganha_poder_input"><label for="questaum02_ganha_poder_input">: Ganha Poder</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_ganha_pontos_input" name="questaum02_ganha_pontos_input"><label for="questaum02_ganha_pontos_input">: Ganha Pontos</label></li>
					<li><input required type="number" min="1" max="8" value="1" id="questaum02_derrota_input" name="questaum02_derrota_input"><label for="questaum02_derrota_input">: Derrota</label></li>
				</ul><br>
				<h3>Quest&atilde;o 03</h3><br>
				<ol>
					<li>Estrela Laranja com C&iacute;rculo Vermelho</li>
					<li>Sapato</li>
					<li>Estrela Verde com Cora&ccedil;&atilde;o Vermelho</li>
					<li>Estrela Azul com Pent&aacute;gono Azul para Baixo</li>
				</ol><br>
				<ol>
					<li><select id="questaum03_select_assertiva1" name="questaum03_select_assertiva1">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum03_select_assertiva2" name="questaum03_select_assertiva2">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum03_select_assertiva3" name="questaum03_select_assertiva3">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum03_select_assertiva4" name="questaum03_select_assertiva4">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 04</h3><br>
				<ol>
					<li>O Tiro de Gelo Fica Maior</li>
					<li>Aumenta a Velocidade</li>
					<li>Atira mais Longe</li>
					<li>Ganha uma Vida</li>
				</ol><br>
				<ol>
					<li><select id="questaum04_select_assertiva1" name="questaum04_select_assertiva1">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum04_select_assertiva2" name="questaum04_select_assertiva2">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum04_select_assertiva3" name="questaum04_select_assertiva3">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
					<li><select id="questaum04_select_assertiva4" name="questaum04_select_assertiva4">
						<option selected value="1">Life Up</option>
						<option value="2">Range Up</option>
						<option value="3">Fire Up</option>
						<option value="4">Speed Up</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 05</h3><br>
				<p>Sobre os chefes do jogo:</p><br>
				<ol>
					<li>A bola da cabe&ccedil;a do chefe tem sabor de morango e os olhos t&ecirc;m forma de lim&atilde;o. Quando
					anda para a esquerda ou para a direita, fica a express&atilde;o facial neutra e fica mexendo os bra&ccedil;os
					para a esquerda e para a direita, ficando os bra&ccedil;os na mesma dire&ccedil;&atilde;o. Quando o	papai noel
					est&aacute; abaixo do chefe, este vomita uma bola de gelo. Quando o chefe perde uma vida, ele olha para cima
					e mexe os bra&ccedil;os para cima e para baixo. Quando n&atilde;o tem nenhum inimigo simples, o chefe deixa o
					bra&ccedil;o direito quieto para baixo, fica com os olhos fechados e mexe o bra&ccedil;o esquerdo para cima e
					para baixo, para chamar a aten&ccedil;&atilde;o dos inimigos simples. &Eacute; o segundo chefe do jogo.</li>
					<li>Quando n&atilde;o tem nenhum inimigo simples, o chefe junta os dedos e move as m&atilde;os para baixo e
					para os lados, de forma espelhada, para chamar a aten&ccedil;&atilde;o dos inimigos simples. O chefe voa, com
					as m&atilde;os abertas, com a palma da m&atilde;o para baixo, em dire&ccedil;&atilde;o a um pouco acima do papai
					noel, e quando chega, o chefe junta os dedos e move as m&atilde;os para baixo e para os lados, de forma espelhada,
					para atirar 2 bolas de gelo de suas m&atilde;os para baixo. O chefe em alguns momentos desaparece e imediatamente
					aparece em outra posi&ccedil;&atilde;o se teletransportando. Quando o chefe perde uma vida, ele se assusta com seus
					olhos em forma de estrela e seus bra&ccedil;os abertos para cima, por 1 segundo, e depois, junta os dedos, mexe as
					m&atilde;os para cima e para baixo, e depois, move as m&atilde;os para baixo e para os lados, de forma espelhada,
					para fazer acontecer uma chuva de espinhos de gelo. Algumas chuvas t&ecirc;m os espinhos de gelo muito juntos, e algumas,
					tem um espa&ccedil;o entre um espinho e outro. &Eacute; o quarto chefe do jogo.</li>
					<li>Enquanto anda para a esquerda e para a direita, fica girando. Quando o papai noel est&aacute;
					acima do chefe, este pula com pernas bem abertas e em espacato. Quando o chefe perde uma vida, ele mexe
					os bra&ccedil;os, as pernas e os olhos. Quando n&atilde;o tem nenhum inimigo simples, o chefe faz
					malabarismos para chamar a aten&ccedil;&atilde;o dos inimigos simples. Enquanto o chefe faz malabarismos,
					ele usa uma coroa. &Eacute; o primeiro chefe do jogo.</li>
					<li>A pele &eacute; verde, o cabelo e as sobrancelhas s&atilde;o azuis e as asas e as orelhas s&atilde;o marrons.
					Quando n&atilde;o tem nenhum inimigo simples, o chefe fica com as asas fechadas por poucos segundos, depois as abre
					com for&ccedil;a, olha para cima e abre a boca para chamar a aten&ccedil;&atilde;o dos inimigos simples. Quando o chefe
					perde uma vida, ele se assusta olhando para cima com a boca aberta. Enquanto tiver inimigos simples, o chefe fica com as
					asas fechadas por poucos segundos, depois voa em dire&ccedil;&atilde;o ao papai noel. &Eacute; o terceiro chefe do jogo.</li>
				</ol><br>
				<ol>
					<li><select id="questaum05_select_assertiva1" name="questaum05_select_assertiva1">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum05_select_assertiva2" name="questaum05_select_assertiva2">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum05_select_assertiva3" name="questaum05_select_assertiva3">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum05_select_assertiva4" name="questaum05_select_assertiva4">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 06</h3><br>
				<p>Sobre os controles do jogo:</p><br>
				<ol>
					<li>Atirar Gelo</li>
					<li>Pular</li>
					<li>Andar para a Direita</li>
					<li>Ir para a Plataforma de Baixo</li>
					<li>Chutar Bola de Gelo</li>
					<li>Andar para a Esquerda</li>
				</ol><br>
				<ol>
					<li><select id="questaum06_select_assertiva1" name="questaum06_select_assertiva1">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
					<li><select id="questaum06_select_assertiva2" name="questaum06_select_assertiva2">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
					<li><select id="questaum06_select_assertiva3" name="questaum06_select_assertiva3">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
					<li><select id="questaum06_select_assertiva4" name="questaum06_select_assertiva4">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
					<li><select id="questaum06_select_assertiva5" name="questaum06_select_assertiva5">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
					<li><select id="questaum06_select_assertiva6" name="questaum06_select_assertiva6">
						<option selected value="1">Tecla da Seta para a Esquerda</option>
						<option value="2">Tecla da Seta para a Direita</option>
						<option value="3">Tecla da Seta para Cima</option>
						<option value="4">Tecla da Seta para Baixo</option>
						<option value="5">Tecla da Barra de Espa&ccedil;o</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 07</h3><br>
				<p>Quem &eacute; o personagem jog&aacute;vel?</p><br>
				<p><select id="questaum07_select" name="questaum07_select">
					<option selected value="1">Primeiro Chefe do Jogo</option>
					<option value="2">Segundo Chefe do Jogo</option>
					<option value="3">Um dos Inimigos Simples do Jogo</option>
					<option value="4">Papai Noel</option>
					<option value="5">Terceiro Chefe do Jogo</option>
					<option value="6">Quarto Chefe do Jogo</option>
				</select></p><br>
				<h3>Quest&atilde;o 08</h3><br>
				<p>Sobre os inimigos simples do jogo:</p><br>
				<ol>
					<li>Anda em Alta Velocidade e N&atilde;o Usa Poder</li>
					<li>Voa em Dire&ccedil;&atilde;o ao Papai Noel em Baixa Velocidade e Cospe Fogo</li>
					<li>Anda em Baixa Velocidade e Atira uma Linha de Fogo que Vai para Frente e para Baixo em um Arco de 1/4 de C&iacute;rculo.</li>
					<li>Anda em Baixa Velocidade e Ataca com um Raio que Fica na Frente em Linha Reta em Curta Dist&acirc;ncia.</li>
					<li>Voa em Dire&ccedil;&atilde;o ao Papai Noel em Alta Velocidade e N&atilde;o Usa Poder</li>
					<li>Anda em Baixa Velocidade e N&atilde;o Usa Poder</li>
					<li>Anda em Baixa Velocidade e Bate uma Foice.</li>
					<li>Voa em Dire&ccedil;&atilde;o ao Papai Noel em Baixa Velocidade e N&atilde;o Usa Poder</li>
				</ol><br>
				<ol>
					<li><select id="questaum08_select_assertiva1" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva2" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva3" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva4" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva5" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva6" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva7" style="width: 160px;">
						<option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
					<li><select id="questaum08_select_assertiva8" style="width: 160px;">
		        <option value="1" data-img_src="inimigo_simples1.png"></option>
		        <option value="2" data-img_src="inimigo_simples2.png"></option>
		        <option value="3" data-img_src="inimigo_simples3.png"></option>
						<option value="4" data-img_src="inimigo_simples4.png"></option>
		        <option value="5" data-img_src="inimigo_simples5.png"></option>
		        <option value="6" data-img_src="inimigo_simples6.png"></option>
		        <option value="7" data-img_src="inimigo_simples7.png"></option>
		        <option value="8" data-img_src="inimigo_simples8.png"></option>
			    </select></li>
				</ol><br>
				<h3>Quest&atilde;o 09</h3><br>
				<p>Sobre os mundos do jogo:</p><br>
				<ol>
					<li><img width="360" src="mundo4.png"></li>
					<li><img width="360" src="mundo1.png"></li>
					<li><img width="360" src="mundo3.png"></li>
					<li><img width="360" src="mundo2.png"></li>
				</ol><br>
				<ol>
					<li><select id="questaum09_select_assertiva1" name="questaum09_select_assertiva1">
						<option selected value="1">Mundo 1</option>
						<option value="2">Mundo 2</option>
						<option value="3">Mundo 3</option>
						<option value="4">Mundo 4</option>
					</select></li>
					<li><select id="questaum09_select_assertiva2" name="questaum09_select_assertiva2">
						<option selected value="1">Mundo 1</option>
						<option value="2">Mundo 2</option>
						<option value="3">Mundo 3</option>
						<option value="4">Mundo 4</option>
					</select></li>
					<li><select id="questaum09_select_assertiva3" name="questaum09_select_assertiva3">
						<option selected value="1">Mundo 1</option>
						<option value="2">Mundo 2</option>
						<option value="3">Mundo 3</option>
						<option value="4">Mundo 4</option>
					</select></li>
					<li><select id="questaum09_select_assertiva4" name="questaum09_select_assertiva4">
						<option selected value="1">Mundo 1</option>
						<option value="2">Mundo 2</option>
						<option value="3">Mundo 3</option>
						<option value="4">Mundo 4</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 10</h3><br>
				<ol>
					<li><img width="240" src="fantasma_rei.png"></li>
					<li><img width="240" src="palhaco.png"></li>
					<li><img width="240" src="morcego_roupa.png"></li>
					<li><img width="240" src="taca_sorvete.png"></li>
				</ol><br>
				<ol>
					<li><select id="questaum10_select_assertiva1" name="questaum10_select_assertiva1">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum10_select_assertiva2" name="questaum10_select_assertiva2">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum10_select_assertiva3" name="questaum10_select_assertiva3">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
					<li><select id="questaum10_select_assertiva4" name="questaum10_select_assertiva4">
						<option selected value="1">Palha&ccedil;o</option>
						<option value="2">Ta&ccedil;a com Sorvete</option>
						<option value="3">Morcego-Roupa</option>
						<option value="4">Fantasma-Rei</option>
					</select></li>
				</ol><br>
				<h3>Quest&atilde;o 11</h3><br>
				<p>O que &eacute; o BlueMaxima&apos;s Flashpoint? Por que o BlueMaxima&apos;s Flashpoint foi criado?</p><br>
				<ol>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de anima&ccedil;&otilde;es baix&aacute;veis de celular. Foi criado porque muita gente precisa dele.</li>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de jogos baix&aacute;veis de computador. Foi criado pela alta inova&ccedil;&atilde;o do conte&uacute;do.</li>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de jogos de navegador de computador e anima&ccedil;&otilde;es de navegador de computador. Foi criado pela tentativa de ultrapassar o desaparecimento do conte&uacute;do anterior &agrave; morte do Adobe Flash Player.</li>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de anima&ccedil;&otilde;es baix&aacute;veis de computador. Foi criado do nada.</li>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de jogos baix&aacute;veis de celular. Foi criado porque &eacute; um curso.</li>
					<li>&Eacute; um projeto de preserva&ccedil;&atilde;o de jogos de navegador de celular e anima&ccedil;&otilde;es de navegador de celular. Foi criado porque pode usar de qualquer lugar do mundo e de qualquer momento da semana.</li>
				</ol><br>
				<p><input required type="number" value="1" id="questaum11_input" name="questaum11_input"></p><br>
				<p><button type="button" onclick="calcularNota();" id="btn_enviar_prova">Enviar</button></p><br>
				<p><button type="button" onclick="novaTentativaDaProva();" disabled id="btn_nova_tentativa">Fazer Nova Tentativa</button></p><br>
			</form>
		</section>
		<section id="certificado_conclusaum" hidden>
			<div id="div_certificado" style="background-color: white; width: 640px; height: 480px; display: table; margin: 0 auto;">
				<div style="display: table-cell; margin: 0 auto; vertical-align: middle; width: 640px; height: 480px;">
					<p style="line-height: 3; color: black; font-size: 16pt; text-align: justify;">Eduardo de Quadros certifica que <b style="font-size: 16pt;"><?php echo $_SESSION['nome_completo_aluno_jogo_deep_freeze']; ?></b> em <i id="data_atual_certificado" style="font-size: 16pt;"></i> de S&atilde;o Paulo, concluiu o curso de <b style="font-size: 16pt;">Jogo Deep Freeze</b> com carga hor&aacute;ria de 1 hora.</p>
				</div>
			</div><br>
			<p><button onclick="takeshot();">Tirar Captura</button></p><br>
			<div style="text-align: center;"><img width="640" src="" alt id="result_certificado"></div><br>
		</section>
		<br><br>
		<script src="https://www.eduardodequadros.site/infoprodutos/lib/html2canvas/html2canvas.min.js"></script>
		<script type="text/javascript">
        // Define the function
        // to screenshot the div
        function takeshot() {
					html2canvas(document.getElementById("div_certificado"), {
						letterRendering: 1,
						allowTaint: true,
						useCORS: true
					}).then(function (canvas) {
						// It will return a canvas element
						document.getElementById("result_certificado").src = canvas.toDataURL("image/png", 0.5);
					}).catch((e) => {
						// Handle errors
						console.log(e);
					});
        }
    </script>
		<script type="text/javascript">
		    function custom_template(obj){
            var data = $(obj.element).data();
            var text = $(obj.element).text();
            if(data && data['img_src']){
                img_src = data['img_src'];
                template = $("<div><img src=\"" + img_src + "\" style=\"width:108px;height:108px;\"/><p style=\"font-weight: 700;font-size:14pt;text-align:center;\">" + text + "</p></div>");
                return template;
            }
        }
		    var options = {
		        'templateSelection': custom_template,
		        'templateResult': custom_template,
		    }
		    $('#questaum08_select_assertiva1').select2(options);
				$('#questaum08_select_assertiva2').select2(options);
				$('#questaum08_select_assertiva3').select2(options);
				$('#questaum08_select_assertiva4').select2(options);
				$('#questaum08_select_assertiva5').select2(options);
				$('#questaum08_select_assertiva6').select2(options);
				$('#questaum08_select_assertiva7').select2(options);
				$('#questaum08_select_assertiva8').select2(options);
		    $('.select2-container--default .select2-selection--single').css({'height': '160px'});
		</script>
	</body>
</html>

As variáveis JavaScript que eu quero que o valor continue igual após atualizar a página são: {tentativaEmProgressoNaProva, tentativaCorrigidaNaProva, notaNaProva}. Sobre a variável itensCurso, todas as opções dela, quero que o valor de selected e o valor de disabled continuem iguais após atualizar a página. Como se faz isso?