scale_bouton_commencer = 0.6 function affichage_inscription(){ // Texte draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48 ctx.strokeStyle = "rgb(255, 255, 255)" // Pour que le contour soit rouge ctx.fillStyle = "rgb(255, 255, 255)" // Pour que l'intérieur soit bleu texte = "Give me your personal information" font = "58pt Courier" ctx.font = font largeur = ctx.measureText(texte).width ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100) // Pour les zones de textes ctx.strokeStyle = "rgb(255, 255, 255)" ctx.fillStyle = "rgb(255, 255, 255)" ctx.font = "28pt Courier" ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12) ctx.fillText("Name:", x_texte_zone, parseInt(document.getElementById("Name").style.top) - 12) ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12) ctx.fillText("Sex:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22) ctx.font = "24pt Courier" ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24) ctx.fillText("None of this above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24) } function afficher_bouton_commencer(){ w_bouton_commencer = scale_bouton_commencer*boutons["commencer"].width h_bouton_commencer = scale_bouton_commencer*boutons["commencer"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) y_bouton_commencer = innerHeight*0.75 // Bouton commencer ctx.drawImage(boutons["commencer"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer) // Survol if(xyMouseMove.x >= x_bouton_commencer && xyMouseMove.x <= x_bouton_commencer + w_bouton_commencer && xyMouseMove.y > y_bouton_commencer && xyMouseMove.y < y_bouton_commencer + h_bouton_commencer){ draw_rectangle(x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer, "rgb(200, 200, 200)", 0.6) } } function action_bouton_commencer(){ page_inscription = false //page_vues = true page_explication = true interactions.push({"time": new Date().getTime(), "type": "Fin inscription - Début explications"}) //gestion des données personnelle de l'utilisateur gestion_donnees_personnelles() } function traitement_inscription(){ affichage_inscription() if (champs_remplis_correctment()){ afficher_bouton_commencer() texte = "Are you ready for the explanations?" font = "40pt Courier" ctx.font = font largeur = ctx.measureText(texte).width ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), y_bouton_commencer-20) if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){ // on passe aux choix action_bouton_commencer() } } } ////////////////////////////////////////////////////////////// /// CHAMPS INSCRIPTION function champs_remplis_correctment(){ firstname_ok = false name_ok = false age_ok = false sexe_ok = false if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true} if (document.getElementById("Name").value.length >0 && (value_non_vide(document.getElementById("Name").value))){name_ok = true} if ((document.getElementById("Age").value >0) && (document.getElementById("Age").value.length >0) && (value_non_vide(document.getElementById("Age").value))){age_ok = true} if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked || document.getElementById("SexeA").checked){ sexe_ok= true} return firstname_ok && name_ok && age_ok && sexe_ok } function value_non_vide(V){ non_vide = false for(let p=0;p