page warning ok

This commit is contained in:
mpelissi 2023-03-13 10:04:46 +01:00
parent 68402b075c
commit dcc1139408
5 changed files with 195 additions and 9 deletions

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
grahics/Tutorial/wolf*
graphics/Tutorial/wolf*.png
graphics/Tutorial/wolf*.png
outputs/*

View File

@ -34,6 +34,7 @@
<script src="/static/fonctions_choix_vues.js"></script>
<script src="/static/fonctions_inscription.js"></script>
<script src="/static/fonctions_explications.js"></script>
<script src="/static/fonctions_warnings.js"></script>
<script src="/static/fonctions_analyse.js"></script>
<script src="/static/fonctions_fin.js"></script>
<script src="/static/MAIN.js"></script>

View File

@ -86,6 +86,7 @@ function init_variable(premier_appel){
page_contexte = true
page_inscription = false // true
page_explication = false
page_warning = false
page_explication_bis = false
page_vues = false // false
page_analyse = false
@ -94,6 +95,7 @@ function init_variable(premier_appel){
page_contexte = false
page_inscription = false // true
page_explication = false
page_warning = false
page_explication_bis = false
page_vues = true // false
page_analyse = false
@ -107,6 +109,7 @@ function init_variable(premier_appel){
premier_tour_page_contexte = true
premier_tour_page_inscription = true
premier_tour_page_explications = true
premier_tour_page_warning = true
premier_tour_page_vues = true
premier_tour_page_analyse = true
@ -380,12 +383,19 @@ function animate() {
which_clicked_fleche = -1
which_clicked_bouton = -1
}
// bouton entr ele tutorial et l'étude
// page warning
if(page_warning){
console.log("warning")
if (premier_tour_page_warning){
init_textes_warnings()
premier_tour_page_warning = false}
traitement_warnings()}
// bouton entr le tutorial et l'étude
if (page_explication_bis){
ctx.clearRect(0, 0, canvas.width, canvas.height)
//console.log("boucle explication2")
commencer_etude()
commencer_etude()
}
////////////////////////////////////////////////////////////////////////////////
// page de choix
@ -455,7 +465,7 @@ function animate() {
}
////////////////////////////////////////////////////////////////////////////////
// page fin
if (!page_contexte && !page_inscription && !page_explication && !page_explication_bis && !page_vues && !page_analyse){
if (!page_contexte && !page_inscription && !page_explication && !page_warning && !page_explication_bis && !page_vues && !page_analyse){
//console.log("boucle fin")
// on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse)
@ -478,7 +488,7 @@ function animate() {
// Si la requête est terminée, et que la réponse n'est pas une erreur.
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
message_fin = "> It's done."
message_fin = "> It's done. You can close the web page."
//print_text(handle_text(message_fin, (window.innerWidth/2)-450, innerHeight/2+150 , "26pt Courier", 1000))
envoie_termine = true
affichage_texte_fin(message_fin, envoie_termine)

View File

@ -473,7 +473,8 @@ function action_fin_explication(){
ctxMins[i].clearRect(0, 0, canvasMins[i].width, canvasMins[i].height)
}
page_explication = false
page_explication_bis = true
//page_explication_bis = true
page_warning = true
interactions.push({"time": new Date().getTime(), "type": "Fin explication"})
}
@ -532,8 +533,10 @@ function action_clavier_explication(event){
action_bouton_pose()
action_suivante() }
break;
// valider
case 'Enter':
case 'Enter':
console.log('clavier')
if (num_action == nb_action && page_explication){
action_fin_explication()
}
@ -541,7 +544,13 @@ function action_clavier_explication(event){
action_bouton_commencer_explication()
}
if (num_action < nb_action && condition_suivant.type =="bouton"){
action_suivante()}
action_suivante()}
if (page_warning && num_warning < (warnings_page_1.length-1)){
action_bouton_suivant_warning()}
if (page_warning && num_warning == (warnings_page_1.length-1)){
action_bouton_commencer_warning()
}
break;
case 'Backspace':

View File

@ -0,0 +1,165 @@
scale_bouton_commencer_warning = 0.6
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
print_text(handle_text(texte, xt, yt, font, l_max_texte), false)
}
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)
}
////////////////////////////////////////////////////////////////////
///// BOUTON COMMENCER
function action_bouton_commencer_warning(){
page_warning = false
page_explication_bis = true
//page_vues = true
interactions.push({"time": new Date().getTime(), "type": "Fin warning"})
}
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(){
w_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].width
h_bouton_suivant = scale_bouton_commencer_warning*boutons["suivant"].height
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
x_texte = window.innerWidth*(1/8)
w_texte = window.innerWidth*(6/8)
font_texte = (0.012*window.innerWidth)+"pt Courier"
// titre commun à chaque page
affichage_titre_warning(titre, (0.018*window.innerWidth)+"pt Courier", "#EF476F", y_titre)
// 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},
"texte1":{"t":"- When you have launched the web page, 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},
"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"]]
}