bvs/static/fonctions_inscription.js

309 lines
12 KiB
JavaScript
Raw Normal View History

2023-03-10 11:48:37 +01:00
scale_bouton_commencer = 1
scale_bouton_suivant = 0.6
2023-03-04 16:49:50 +01:00
2023-03-14 15:59:38 +01:00
h_bouton_inscription = 0.1*window.innerHeight
taille_titre_insription = (0.018*window.innerWidth)
taille_texte_inscription = (0.015*window.innerWidth)
2023-03-04 16:49:50 +01:00
function affichage_inscription(){
// Texte
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1) // ou + clair 4, 38, 48
2023-03-14 15:59:38 +01:00
// 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)
titre = "Personal Information"
affichage_titre(titre, taille_titre_insription+"pt Courier", "#EF476F")
2023-03-04 16:49:50 +01:00
// Pour les zones de textes
ctx.strokeStyle = "rgb(255, 255, 255)"
ctx.fillStyle = "rgb(255, 255, 255)"
2023-03-14 15:59:38 +01:00
ctx.font = taille_texte_inscription+"pt Courier"
2023-03-04 17:17:07 +01:00
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)
2023-03-14 10:45:18 +01:00
ctx.fillText("Gender:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22)
2023-03-04 17:17:07 +01:00
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)
2023-03-10 11:04:01 +01:00
ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24)
2023-03-04 16:49:50 +01:00
}
2023-03-10 12:17:25 +01:00
//////////////////////////////////////////////////////////////
/// BOUTON COMMENCER INSCRIPTION (POUUR ALLER VERS LE TUTO)
2023-03-04 16:49:50 +01:00
2023-03-10 11:48:37 +01:00
function afficher_bouton_commencer_inscription(){
2023-03-14 15:59:38 +01:00
w_bouton_commencer = 2*ratio_inscription*boutons["commencer_tuto"].width
h_bouton_commencer = 2*h_bouton_inscription //scale_bouton_commencer*boutons["commencer_tuto"].height
2023-03-04 16:49:50 +01:00
x_bouton_commencer = (window.innerWidth/2)-(w_bouton_commencer/2)
2023-03-14 15:59:38 +01:00
y_bouton_commencer = (window.innerHeight/2)-(h_bouton_commencer/2)
2023-03-10 12:17:25 +01:00
2023-03-04 16:49:50 +01:00
// Bouton commencer
2023-03-10 11:48:37 +01:00
ctx.drawImage(boutons["commencer_tuto"], x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)
2023-03-04 16:49:50 +01:00
// 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)
}
}
2023-03-10 11:48:37 +01:00
function action_bouton_commencer_inscription(){
2023-03-04 16:49:50 +01:00
page_inscription = false
2023-03-06 16:02:20 +01:00
//page_vues = true
page_explication = true
2023-03-10 17:18:18 +01:00
interactions.push({"time": new Date().getTime(), "type": "Début explications"})
2023-03-06 16:02:20 +01:00
//gestion des données personnelle de l'utilisateur
2023-03-10 11:48:37 +01:00
//gestion_donnees_personnelles()
2023-03-06 16:02:20 +01:00
2023-03-04 16:49:50 +01:00
}
2023-03-13 16:28:55 +01:00
//////////////////////////////////////////////////////////////
/// BOUTON COMMENCER SKIP (POUUR ALLER VERS LE TUTO)
function afficher_bouton_skip_inscription(){
2023-03-14 15:59:38 +01:00
w_bouton_skip = w_bouton_commencer
h_bouton_skip = h_bouton_commencer
2023-03-13 16:28:55 +01:00
x_bouton_skip = (window.innerWidth/2)-(w_bouton_skip/2)
y_bouton_skip = (window.innerHeight/2) + (h_bouton_skip/2) + 20
// Bouton commencer
2023-03-13 16:33:16 +01:00
ctx.drawImage(boutons["skip"], x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip)
2023-03-13 16:28:55 +01:00
// 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()
}
2023-03-10 12:17:25 +01:00
//////////////////////////////////////////////////////////////
/// BOUTON SUIVANT INSCRIPTION
2023-03-10 11:48:37 +01:00
function afficher_bouton_suivant_inscription(){
2023-03-14 15:59:38 +01:00
ratio_inscription = h_bouton_inscription/boutons["suivant_grand"].height
w_bouton_suivant = ratio_inscription*boutons["suivant_grand"].width
h_bouton_suivant = h_bouton_inscription
2023-03-10 11:48:37 +01:00
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)
2023-03-04 16:49:50 +01:00
2023-03-10 11:48:37 +01:00
// 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)
2023-03-04 16:49:50 +01:00
}
}
2023-03-10 11:48:37 +01:00
function action_bouton_suivant_inscription(){
inscription_finie = true
gestion_donnees_personnelles()
ctx.clearRect(0, 0, canvas.width, canvas.height)
2023-03-10 17:18:18 +01:00
interactions.push({"time": new Date().getTime(), "type": "Fin inscription"})
2023-03-10 11:48:37 +01:00
}
2023-03-04 16:49:50 +01:00
//////////////////////////////////////////////////////////////
/// CHAMPS INSCRIPTION
function champs_remplis_correctment(){
firstname_ok = false
name_ok = false
age_ok = false
sexe_ok = false
2023-03-06 16:02:20 +01:00
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}
2023-03-07 18:16:30 +01:00
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}
2023-03-04 16:49:50 +01:00
return firstname_ok && name_ok && age_ok && sexe_ok
}
2023-03-06 16:02:20 +01:00
function value_non_vide(V){
non_vide = false
for(let p=0;p<V.length; p++){
if (V[p] != ' '){return true}
}
return non_vide
}
2023-03-04 16:49:50 +01:00
function afficher_champs_inscription() {
2023-03-10 11:48:37 +01:00
inscription_finie = false
2023-03-20 09:40:11 +01:00
w_text_zone = 0.015*window.innerWidth
2023-03-14 15:59:38 +01:00
h_text_zone = 0.05*window.innerHeight
2023-03-04 16:49:50 +01:00
nb_caract_min = 1
nb_caract_max = 30
2023-03-14 15:59:38 +01:00
x_texte_zone = (window.innerWidth/4)
y_texte_zone = 0.20*window.innerHeight
ecart_texte_zone = 0.15*window.innerHeight
2023-03-04 16:49:50 +01:00
// Zone de texte : Firstname
var input = document.createElement('input');
input.type = 'text';
input.id = 'Firstname';
input.minLength = nb_caract_min
input.maxLength = nb_caract_max
input.size = w_text_zone
input.style.position = 'fixed';
input.style.left = x_texte_zone+'px';
input.style.top = y_texte_zone+'px';
input.style.textAlign = 'left'
input.style.height = h_text_zone
2023-03-14 15:59:38 +01:00
input.style.font = taille_texte_inscription+"pt Courier"
2023-03-04 16:49:50 +01:00
document.body.appendChild(input);
input.focus();
// Zone de texte : Name
var input2 = document.createElement('input');
input2.type = 'text';
input2.id = 'Name';
input2.minLength = nb_caract_min
input2.maxLength = nb_caract_max
input2.size = w_text_zone
// style
input2.style.position = 'fixed';
input2.style.left = x_texte_zone+'px';
input2.style.top = ecart_texte_zone+y_texte_zone+'px';
input2.style.textAlign = 'left'
input2.style.height = h_text_zone
2023-03-14 15:59:38 +01:00
input2.style.font = taille_texte_inscription+"pt Courier"
2023-03-04 16:49:50 +01:00
document.body.appendChild(input2);
input2.focus();
// Zone de texte : Age
var input3 = document.createElement('input');
input3.type = 'number';
input3.id = 'Age';
input3.min = 1
input3.max = 99
2023-03-14 10:45:18 +01:00
input3.size = 10
2023-03-04 16:49:50 +01:00
// style
input3.style.position = 'fixed';
input3.style.left = x_texte_zone+'px';
input3.style.top = 2*ecart_texte_zone + y_texte_zone+'px';
input3.style.textAlign = 'left'
input3.style.height = h_text_zone
2023-03-14 15:59:38 +01:00
input3.style.font = taille_texte_inscription+"pt Courier"
2023-03-04 16:49:50 +01:00
document.body.appendChild(input3);
input3.focus();
// Zone de texte : Sexe
var input4 = document.createElement('input');
input4.type = 'radio';
input4.id = 'SexeM';
input4.name = "sexe"
//input4.size = w_text_zone
// style
input4.style.position = 'fixed';
2023-03-14 10:45:18 +01:00
input4.style.left = x_texte_zone+'px';
input4.style.top = 3*ecart_texte_zone + y_texte_zone+'px';
2023-03-04 17:17:07 +01:00
input4.style.height = 20
input4.style.width = 20
2023-03-04 16:49:50 +01:00
document.body.appendChild(input4);
input4.focus();
var input5 = document.createElement('input');
input5.type = 'radio';
input5.id = 'SexeF';
input5.name = "sexe"
//input4.size = w_text_zone
// style
input5.style.position = 'fixed';
2023-03-14 15:59:38 +01:00
input5.style.left = window.innerWidth*0.1 + x_texte_zone+'px';
2023-03-14 10:45:18 +01:00
input5.style.top = 3*ecart_texte_zone + y_texte_zone+'px';
2023-03-04 17:17:07 +01:00
input5.style.height = 20
input5.style.width = 20
2023-03-04 16:49:50 +01:00
document.body.appendChild(input5);
input5.focus();
2023-03-07 18:16:30 +01:00
var input6 = document.createElement('input');
input6.type = 'radio';
input6.id = 'SexeA';
input6.name = "sexe"
//input4.size = w_text_zone
// style
input6.style.position = 'fixed';
2023-03-14 15:59:38 +01:00
input6.style.left = window.innerWidth*0.22 + x_texte_zone+'px';
2023-03-14 10:45:18 +01:00
input6.style.top = 3*ecart_texte_zone + y_texte_zone+'px';
2023-03-07 18:16:30 +01:00
input6.style.height = 20
input6.style.width = 20
document.body.appendChild(input6);
input6.focus();
2023-03-04 16:49:50 +01:00
}
function gestion_donnees_personnelles(){
// Sauvegarde des infos
if (document.getElementById("SexeM").checked){sexe = "M"}
else if (document.getElementById("SexeF").checked){sexe = "F"}
2023-03-07 18:16:30 +01:00
else if (document.getElementById("SexeM").checked){sexe = "M"}
2023-03-04 16:49:50 +01:00
else {sexe='None'}
choix['identite'] = {"Firstname":document.getElementById("Firstname").value,
"Name": document.getElementById("Name").value,
"Age": document.getElementById("Age").value,
"Sexe": sexe}
document.getElementById("Firstname").style.display = 'none'
document.getElementById("Name").style.display = 'none'
document.getElementById("Age").style.display = 'none'
document.getElementById("SexeM").style.display = 'none'
document.getElementById("SexeF").style.display = 'none'
2023-03-07 18:16:30 +01:00
document.getElementById("SexeA").style.display = 'none'
2023-03-10 11:48:37 +01:00
}
2023-03-04 16:49:50 +01:00
2023-03-10 11:48:37 +01:00
//////////////////////////////////////////////////////////////
/// MAIN INSCRIPTION
function traitement_inscription(){
if (!inscription_finie){
affichage_inscription()
if (champs_remplis_correctment()){
// affichage du bouton next
afficher_bouton_suivant_inscription()
// Si on clique sur le bouton Next
if (clicked && click_inside(xyMouseDown, x_bouton_suivant, y_bouton_suivant , w_bouton_suivant, h_bouton_suivant)){
action_bouton_suivant_inscription()
}
}
// les champs sont remplie et on a appuyé sur le bouton next
} else {
2023-03-14 15:59:38 +01:00
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
2023-03-10 11:48:37 +01:00
texte = "Are you ready to start the tutorial to learn"
texte2 = "how to use the interface of the study?"
2023-03-14 15:59:38 +01:00
ctx.strokeStyle = "#EF476F"
ctx.fillStyle = "#EF476F"
ctx.font = taille_titre_insription+"pt Courier"
2023-03-10 11:48:37 +01:00
largeur = ctx.measureText(texte).width
largeur2 = ctx.measureText(texte2).width
2023-03-14 15:59:38 +01:00
ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 0.10*window.innerHeight)
ctx.fillText(texte2, (window.innerWidth/2)- (largeur2/2), 0.16*window.innerHeight)
2023-03-13 16:28:55 +01:00
// affichager le bouton commencer tutorial
2023-03-10 11:48:37 +01:00
afficher_bouton_commencer_inscription()
2023-03-13 16:28:55 +01:00
// affichager le bouton skipi
afficher_bouton_skip_inscription()
// si on appuie sur start tutorial
2023-03-10 11:48:37 +01:00
if (clicked && click_inside(xyMouseDown, x_bouton_commencer, y_bouton_commencer , w_bouton_commencer, h_bouton_commencer)){
action_bouton_commencer_inscription()
}
2023-03-13 16:28:55 +01:00
if (clicked && click_inside(xyMouseDown, x_bouton_skip, y_bouton_skip , w_bouton_skip, h_bouton_skip)){
action_bouton_skip_inscription()
}
2023-03-10 12:17:25 +01:00
2023-03-10 11:48:37 +01:00
}
2023-03-04 16:49:50 +01:00
}