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)
2023-04-26 11:47:36 +02:00
titre = "Information"
2023-03-14 15:59:38 +01:00
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-04-26 15:03:10 +02:00
2023-03-22 10:50:06 +01:00
//ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12)
2023-04-26 15:03:10 +02:00
//Prolificctx.fillText("Pseudo:", x_texte_zone, parseInt(document.getElementById("Pseudo").style.top) - 12)
//Prolific ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12)
//Prolific ctx.fillText("Gender:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22)
//Prolific ctx.fillText("Male", parseInt(document.getElementById("SexeM").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
//Prolific ctx.fillText("Female", parseInt(document.getElementById("SexeF").style.left)+40, parseInt(document.getElementById("SexeM").style.top)+24)
//Prolific ctx.fillText("None of these above", parseInt(document.getElementById("SexeA").style.left)+40, parseInt(document.getElementById("SexeA").style.top)+24)
//Prolific
ctx . fillText ( "Please enter your Prolific ID:" , x _texte _zone , parseInt ( document . getElementById ( "Pseudo" ) . style . top ) - 20 )
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-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "debut_tutorial" , [ ] ) } )
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
2023-03-22 11:42:02 +01:00
//page_explication_bis = true
page _warning = true
2023-03-22 11:24:26 +01:00
//page_vues = true
2023-03-13 16:28:55 +01:00
skiped = true
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "skip" , [ ] ) } )
2023-03-22 11:42:02 +01:00
document . removeEventListener ( "keydown" , action _clavier _inscription )
num _action = 0
nb _action = 1
init _clavier _explication ( )
2023-03-13 16:28:55 +01:00
//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-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "fin_inscription" , [ ] ) } )
2023-03-10 11:48:37 +01:00
}
2023-03-04 16:49:50 +01:00
//////////////////////////////////////////////////////////////
/// CHAMPS INSCRIPTION
function champs _remplis _correctment ( ) {
2023-03-22 10:50:06 +01:00
//firstname_ok = false
2023-03-04 16:49:50 +01:00
name _ok = false
age _ok = false
sexe _ok = false
2023-03-22 10:50:06 +01:00
//if ((document.getElementById("Firstname").value.length >0) && (value_non_vide(document.getElementById("Firstname").value))){firstname_ok = true}
2023-04-26 15:03:10 +02:00
//Prolific if (document.getElementById("Pseudo").value.length > 10 && (value_non_vide(document.getElementById("Pseudo").value))){name_ok = true} //Prolific on a mis 24 au lieu de 0
//Prolific if ((document.getElementById("Age").value >0) && (document.getElementById("Age").value.length >0) && (value_non_vide(document.getElementById("Age").value))){age_ok = true}
//Prolific if (document.getElementById("SexeM").checked || document.getElementById("SexeF").checked || document.getElementById("SexeA").checked){ sexe_ok= true}
2023-03-22 10:50:06 +01:00
//return firstname_ok && name_ok && age_ok && sexe_ok
2023-04-26 15:03:10 +02:00
//Prolific return name_ok && age_ok && sexe_ok
//Prolific
if ( document . getElementById ( "Pseudo" ) . value . length == 24 && ( value _non _vide ( document . getElementById ( "Pseudo" ) . value ) ) ) { name _ok = true } //Prolific on a mis 24 au lieu de 0
return name _ok
2023-03-04 16:49:50 +01:00
}
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-04-26 15:03:10 +02:00
w _text _zone = 0.02 * 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 )
2023-04-26 15:03:10 +02:00
y _texte _zone = 0.40 * window . innerHeight
2023-03-22 10:50:06 +01:00
ecart _texte _zone = 0.2 * window . innerHeight
2023-03-14 15:59:38 +01:00
2023-03-04 16:49:50 +01:00
2023-03-22 10:50:06 +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
// input.style.font = taille_texte_inscription+"pt Courier"
// document.body.appendChild(input);
// input.focus();
2023-03-04 16:49:50 +01:00
// Zone de texte : Name
var input2 = document . createElement ( 'input' ) ;
input2 . type = 'text' ;
2023-03-22 10:50:06 +01:00
input2 . id = 'Pseudo' ;
2023-03-04 16:49:50 +01:00
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' ;
2023-03-22 10:50:06 +01:00
input2 . style . top = y _texte _zone + 'px' ; //ecart_texte_zone+y_texte_zone+'px';
2023-03-04 16:49:50 +01:00
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 ( ) ;
2023-04-26 15:03:10 +02:00
//Prolific
// // Zone de texte : Age
// var input3 = document.createElement('input');
// input3.type = 'number';
// input3.id = 'Age';
// input3.min = 1
// input3.max = 99
// input3.size = 10
// // style
// input3.style.position = 'fixed';
// input3.style.left = x_texte_zone+'px';
// input3.style.top = ecart_texte_zone+y_texte_zone+'px';//2*ecart_texte_zone + y_texte_zone+'px';
// input3.style.textAlign = 'left'
// input3.style.height = h_text_zone
// input3.style.font = taille_texte_inscription+"pt Courier"
// document.body.appendChild(input3);
// input3.focus();
//Prolific
// // 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';
// input4.style.left = x_texte_zone+'px';
// input4.style.top = 2*ecart_texte_zone + y_texte_zone+'px';//3*ecart_texte_zone + y_texte_zone+'px';
// input4.style.height = 20
// input4.style.width = 20
// document.body.appendChild(input4);
// input4.focus();
//Prolific
// var input5 = document.createElement('input');
// input5.type = 'radio';
// input5.id = 'SexeF';
// input5.name = "sexe"
// //input4.size = w_text_zone
// // style
// input5.style.position = 'fixed';
// input5.style.left = window.innerWidth*0.1 + x_texte_zone+'px';
// input5.style.top = 2*ecart_texte_zone + y_texte_zone+'px';//3*ecart_texte_zone + y_texte_zone+'px';
// input5.style.height = 20
// input5.style.width = 20
// document.body.appendChild(input5);
// input5.focus();
//Prolific
// var input6 = document.createElement('input');
// input6.type = 'radio';
// input6.id = 'SexeA';
// input6.name = "sexe"
// //input4.size = w_text_zone
// // style
// input6.style.position = 'fixed';
// input6.style.left = window.innerWidth*0.22 + x_texte_zone+'px';
// input6.style.top = 2*ecart_texte_zone + y_texte_zone+'px';//3*ecart_texte_zone + y_texte_zone+'px';
// input6.style.height = 20
// input6.style.width = 20
// document.body.appendChild(input6);
// input6.focus();
2023-03-07 18:16:30 +01:00
2023-03-04 16:49:50 +01:00
}
function gestion _donnees _personnelles ( ) {
// Sauvegarde des infos
2023-04-26 15:03:10 +02:00
//Prolific if (document.getElementById("SexeM").checked){sexe = "M"}
//Prolific else if (document.getElementById("SexeF").checked){sexe = "F"}
//Prolific else if (document.getElementById("SexeM").checked){sexe = "M"}
//Prolific else {sexe='None'}
2023-03-22 10:50:06 +01:00
choix [ 'identite' ] = { //"Firstname":document.getElementById("Firstname").value,
"Pseudo" : document . getElementById ( "Pseudo" ) . value ,
2023-04-26 15:03:10 +02:00
//Prolific "Age": document.getElementById("Age").value,
//Prolific "Sexe": sexe
}
2023-03-22 10:50:06 +01:00
//document.getElementById("Firstname").style.display = 'none'
document . getElementById ( "Pseudo" ) . style . display = 'none'
2023-04-26 15:03:10 +02:00
//Prolific document.getElementById("Age").style.display = 'none'
//Prolific document.getElementById("SexeM").style.display = 'none'
//Prolific document.getElementById("SexeF").style.display = 'none'
//Prolific 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
}