2023-03-14 15:59:38 +01:00
//scale_bouton_commencer_warning = 0.6
h _bouton _warning = 0.1 * window . innerHeight
2023-03-13 10:04:46 +01:00
num _warning = 0
function affichage _texte _warning ( texte , font , color , xt , yt , l _max _texte ) {
// Texte
ctx . strokeStyle = color // Pour que le contour soit rouge
ctx . fillStyle = color // Pour que l'intérieur soit bleu
ctx . font = font
2023-03-14 15:59:38 +01:00
print _text ( handle _text ( texte , xt , yt , font , l _max _texte , color = "#FFFFFF" , interligne = 0.045 * window . innerHeight ) , false )
2023-03-13 10:04:46 +01:00
}
2023-03-14 15:59:38 +01:00
// function affichage_titre_warning(titre, font, color, yt){
// ctx.strokeStyle =color
// ctx.fillStyle =color
// ctx.font = font
// largeur = ctx.measureText(titre).width
// // au milieu
// ctx.fillText(titre, (window.innerWidth/2)- (largeur/2), yt)
// }
2023-03-13 10:04:46 +01:00
////////////////////////////////////////////////////////////////////
///// BOUTON COMMENCER
function action _bouton _commencer _warning ( ) {
page _warning = false
page _explication _bis = true
//page_vues = true
2023-03-29 18:10:51 +02:00
interactions . push ( { "time" : new Date ( ) . getTime ( ) , "type" : get _message ( "fin_warning" , [ ] ) } )
2023-03-13 10:04:46 +01:00
}
function afficher _bouton _commencer _warning ( ) {
w _bouton _commencer = w _bouton _suivant
h _bouton _commencer = h _bouton _suivant
x _bouton _commencer = x _bouton _suivant
y _bouton _commencer = y _bouton _suivant
// Bouton commencer
ctx . drawImage ( boutons [ "suivant" ] , 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 )
}
}
////////////////////////////////////////////////////////////////////
///// BOUTON Next
function action _bouton _suivant _warning ( ) {
num _warning = num _warning + 1
warnings _a _afficher . push ( warnings [ "texte" + num _warning ] )
}
function action _bouton _avant _warning ( ) {
if ( num _warning > 0 ) {
warnings _a _afficher . pop ( ) }
num _warning = num _warning - 1
}
function afficher _bouton _suivant _warning ( ) {
2023-03-14 15:59:38 +01:00
ratio _bouton _warning = h _bouton _warning / boutons [ "suivant" ] . height
w _bouton _suivant = ratio _bouton _warning * boutons [ "suivant" ] . width
h _bouton _suivant = h _bouton _contexte
2023-03-13 10:04:46 +01:00
x _bouton _suivant = ( window . innerWidth / 2 ) + 5
y _bouton _suivant = window . innerHeight - h _bouton _suivant - 20
// Bouton commencer
ctx . drawImage ( boutons [ "suivant" ] , 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 afficher _bouton _avant _warning ( ) {
w _bouton _avant = w _bouton _suivant
h _bouton _avant = h _bouton _suivant
x _bouton _avant = ( window . innerWidth / 2 ) - ( w _bouton _avant ) - 5
y _bouton _avant = y _bouton _suivant
// Bouton commencer
ctx . drawImage ( boutons [ "avant" ] , x _bouton _avant , y _bouton _avant , w _bouton _avant , h _bouton _avant )
// Survol
if ( xyMouseMove . x >= x _bouton _avant && xyMouseMove . x <= x _bouton _avant + w _bouton _avant && xyMouseMove . y > y _bouton _avant && xyMouseMove . y < y _bouton _avant + h _bouton _avant ) {
draw _rectangle ( x _bouton _avant , y _bouton _avant , w _bouton _avant , h _bouton _avant , "rgb(200, 200, 200)" , 0.6 )
}
}
////////////////////////////////////////////////////////////////////
///// MAIN
function traitement _warnings ( ) {
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height )
draw _rectangle ( 0 , 0 , canvas . width , canvas . height , "rgb(3, 26, 33)" , 1 ) // ou + clair 4, 38, 48
// variable position
2023-03-14 15:59:38 +01:00
x _texte = window . innerWidth * ( 1 / 10 )
w _texte = window . innerWidth * ( 8 / 10 )
2023-03-13 10:04:46 +01:00
font _texte = ( 0.012 * window . innerWidth ) + "pt Courier"
2023-03-14 15:59:38 +01:00
2023-03-13 10:04:46 +01:00
// titre commun à chaque page
2023-03-14 15:59:38 +01:00
affichage _titre ( titre , ( 0.018 * window . innerWidth ) + "pt Courier" , "#EF476F" )
2023-03-13 10:04:46 +01:00
// affichage texte
for ( let p = 0 ; p < warnings _a _afficher . length ; p ++ ) {
dict _texte = warnings _a _afficher [ p ]
affichage _texte _warning ( dict _texte . t , font _texte , dict _texte . c , x _texte , dict _texte . y , w _texte )
}
if ( num _warning < ( warnings _page _1 . length ) - 1 ) {
// affichage bouton next
afficher _bouton _suivant _warning ( )
// si on clique sur next
if ( clicked && click _inside ( xyMouseDown , x _bouton _suivant , y _bouton _suivant , w _bouton _suivant , h _bouton _suivant ) ) {
// on passe aux texte suivant
action _bouton _suivant _warning ( )
}
} else {
// affichage bouton next
afficher _bouton _commencer _warning ( )
// si on clique sur next
if ( clicked && click _inside ( xyMouseDown , x _bouton _commencer , y _bouton _commencer , w _bouton _commencer , h _bouton _commencer ) ) {
// on passe aux texte suivant
action _bouton _commencer _warning ( )
}
}
//affichage bouton previous dès le deuxièeme texte
if ( num _warning > 0 ) {
// affichage bouton next
afficher _bouton _avant _warning ( )
//si on clique sur previous
if ( clicked && click _inside ( xyMouseDown , x _bouton _avant , y _bouton _avant , w _bouton _avant , h _bouton _avant ) ) {
// on passe aux texte suivant
action _bouton _avant _warning ( )
}
}
}
////////////////////////////////////////////////////////////////////
///// Textes
function init _textes _warnings ( ) {
y _titre = 50
titre = "Warnings"
color _blanc = "rgb(255,255,255)"
color _rouge = "rgb(239, 71, 111)"
warnings = {
"texte0" : { "t" : "The following is a list of warnings to keep in mind during the study:" , "y" : window . innerHeight * 0.15 , "c" : color _blanc } ,
2023-03-14 10:45:18 +01:00
"texte1" : { "t" : "- During the study, you should not change the size of the web page or computer screen. Changing the size may cause annoyance." , "y" : window . innerHeight * 0.25 , "c" : color _blanc } ,
2023-03-13 10:04:46 +01:00
"texte2" : { "t" : "- The loading time of the objects can take time. The 3D screen may be completely black for a few seconds. Be patient, the objects will appear." , "y" : window . innerHeight * 0.38 , "c" : color _blanc } ,
"texte3" : { "t" : "- Once you have finished the study, wait a few seconds before leaving the web page, to allow time for the data to fully commit to the server. A message will indicate when the registration is complete." , "y" : window . innerHeight * 0.52 , "c" : color _blanc } ,
"texte4" : { "t" : "- If during the study there are some problems that you can't solve with the interface features, you can refresh the web page.All your data will be lost and you will have to start all over again. " , "y" : window . innerHeight * 0.68 , "c" : color _blanc } ,
}
warnings _page _1 = [ warnings [ "texte0" ] , warnings [ "texte1" ] , warnings [ "texte2" ] , warnings [ "texte3" ] , warnings [ "texte4" ] ]
warnings _a _afficher = [ warnings [ "texte0" ] ]
}