scale_bouton_commencer = 1 scale_bouton_suivant = 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 these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24) } ////////////////////////////////////////////////////////////// /// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO) function afficher_bouton_commencer_inscription(){ w_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].width h_bouton_commencer = scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2) y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2) // Bouton commencer ctx.drawImage(boutons["commencer_tuto"], 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_inscription(){ page_inscription = false //page_vues = true page_explication = true interactions.push({"time": new Date().getTime(), "type": "Début explications"}) //gestion des données personnelle de l'utilisateur //gestion_donnees_personnelles() } ////////////////////////////////////////////////////////////// /// BOUTON COMMENCER SKIP (POUUR ALLER VERS LE TUTO) function afficher_bouton_skip_inscription(){ w_bouton_skip = scale_bouton_commencer*boutons["commencer_tuto"].width h_bouton_skip = scale_bouton_commencer*boutons["commencer_tuto"].height x_bouton_skip = (window.innerWidth/2)-(w_bouton_skip/2) y_bouton_skip = (window.innerHeight/2) + (h_bouton_skip/2) + 20 // Bouton commencer ctx.drawImage(boutons["commencer_tuto"], x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip) // Survol if(xyMouseMove.x >= x_bouton_skip && xyMouseMove.x <= x_bouton_skip + w_bouton_skip && xyMouseMove.y > y_bouton_skip && xyMouseMove.y < y_bouton_skip + h_bouton_skip){ draw_rectangle(x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip, "rgb(200, 200, 200)", 0.6) } } function action_bouton_skip_inscription(){ page_inscription = false page_vues = true skiped = true interactions.push({"time": new Date().getTime(), "type": "Skip tutorial -- Debut choix vues"}) //gestion des données personnelle de l'utilisateur //gestion_donnees_personnelles() } ////////////////////////////////////////////////////////////// /// BOUTON SUIVANT INSCRIPTION function afficher_bouton_suivant_inscription(){ w_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].width h_bouton_suivant = scale_bouton_suivant*boutons["suivant_grand"].height x_bouton_suivant = (window.innerWidth/2)-(w_bouton_suivant/2) y_bouton_suivant = innerHeight*0.75 // Bouton commencer ctx.drawImage(boutons["suivant_grand"], x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant) // Survol if(xyMouseMove.x >= x_bouton_suivant && xyMouseMove.x <= x_bouton_suivant + w_bouton_suivant && xyMouseMove.y > y_bouton_suivant && xyMouseMove.y < y_bouton_suivant + h_bouton_suivant){ draw_rectangle(x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant, "rgb(200, 200, 200)", 0.6) } } function action_bouton_suivant_inscription(){ inscription_finie = true gestion_donnees_personnelles() ctx.clearRect(0, 0, canvas.width, canvas.height) interactions.push({"time": new Date().getTime(), "type": "Fin inscription"}) } ////////////////////////////////////////////////////////////// /// 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