Compare commits

...

10 Commits

Author SHA1 Message Date
Thomas Forgione a1de2bda99 Save halfway 2023-04-27 16:30:56 +02:00
mpelissi f02925f808 update prolific que prolific id 2023-04-26 15:03:10 +02:00
mpelissi 4d430df15b ras 2023-04-26 11:49:34 +02:00
mpelissi 4377710299 update prolific 2 2023-04-26 11:48:58 +02:00
mpelissi 5d9ade891d update pour prolific 2023-04-26 11:47:36 +02:00
mpelissi e259c91f17 ras 2023-04-25 12:02:32 +02:00
mpelissi 5d4f0a5dd8 update 2023-04-24 15:13:32 +02:00
mpelissi 4c1ba31097 updtae mesh 2023-04-11 09:23:41 +02:00
mpelissi f3eb8e9ed4 pbl position mesh dans interactipon fleche ok 2023-04-11 09:18:07 +02:00
mpelissi fa87a9c3f5 ashtray ok 2023-04-04 11:30:40 +02:00
28 changed files with 589008 additions and 877555 deletions

View File

@ -3,3 +3,8 @@
(3) npm install
(4) nodemon server.js
(5) go on http://localhost:8000/
run get_json :
(1) se placer dans BVS-study
(2) ./get_json.sh outputs/...../

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,26 @@
<html>
<head>
<link rel="stylesheet" href="/static/style.css">
<meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
overflow:hidden;
}
</style>
<title>User study version 3D</title>
</head>
<body>
<div class = "canvas">
<canvas id="canvas" width="1920" height="1080">
Votre navigateur ne supporte pas les canvas, essayez-en un autre.
</canvas>
</div>

View File

@ -1,28 +1,3 @@
<html>
<head>
<link rel="stylesheet" href="/static/style.css">
<meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
overflow:hidden;
}
</style>
<title>User study version 3D</title>
</head>
<body>
<div class = "canvas">
<canvas id="canvas" width="1920" height="1080">
Votre navigateur ne supporte pas les canvas, essayez-en un autre.
</canvas>
</div>
<script src="/static/three.js"></script>
<script src="/static/LoaderSupport.js"></script>
@ -42,9 +17,9 @@
<script src="/static/fonctions_analyse.js"></script>
<script src="/static/fonctions_fin.js"></script>
<script src="/static/MAIN.js"></script>
</body>
</html>

View File

@ -9,6 +9,9 @@ async function main() {
const app = express();
const HTML_BEGINNING = await fs.readFile(__dirname + '/html/index3D-beginning.html');
const HTML_END = await fs.readFile(__dirname + '/html/index3D-end.html');
//let id = 1;
// Permet de récupérer les données venant du client.
@ -16,17 +19,16 @@ async function main() {
app.use(bodyParser.json());
// Page d'accueil.
app.get('/', function(req, res) {
// On envoie le contenu du fichier index.html.
return res.sendFile(__dirname + '/html/index3D.html');
app.get('/', async function(req, res) {
// On envoie le contenu du fichier index.html avec le uuid généré par le server.
let uuidScript = '<script>window.uuid = "' + uuid() + '";</script>';
return res.send(HTML_BEGINNING + uuidScript + HTML_END);
});
// Route de récupération des données.
app.post('/outputs', async function(req, res) {
let id = uuid();
// Ouverture du fichier en mode append.
let file = await fs.open(__dirname + '/outputs/' + id + '.json', 'a');
let file = await fs.open(__dirname + '/outputs/' + req.body.uuid + '.json', 'w');
// Ajout d'une ligne.
file.write(JSON.stringify(req.body, undefined, 4));

View File

@ -19,7 +19,7 @@ function init_variable(premier_appel){
///////////////////////////////////////////////////////
// CE QUE L'ON RECUPERE A LA FIN
// dictionnaire avec les choix pour TOUS les mesh
if (premier_appel){choix = {}}
if (premier_appel){choix = { uuid: window.uuid }}
// dictionnaire avec les checkbox pour TOUS les mesh
checkbox_clicked = {}
///////////////////////////////////////////////////////
@ -35,22 +35,24 @@ function init_variable(premier_appel){
// Au premier appel on init : les interactions
if (premier_appel){interactions = [{"time" : new Date().getTime(), "type": get_message("debut_etude", [])}]}
choix.interactions = interactions;
// Couleur
alpha_survol = 0.3
// DATA github
indice_mesh = 0 // indice du premier mesh à visionner
mesh_courant = "nope" // nom des mesh
// random nom mesh
mesh_courant = "nope" // nom des mesh
// random nom mesh
//obj_file_random = shuffle(['backpack_regulier_tri_centered_user_study_normed.obj', 'dragon_update_user_study_normed.obj', 'camel_update_user_study_normed.obj', 'gorgoile_update_user_study_centered_normed.obj', 'horse_update_user_study_normed.obj'])
obj_file_random = shuffle(obj_names)
// nombre de mesh a visionner AU TOTAL
nb_mesh = obj_file_random.length
// ---> nombre de mesh a visionner AU TOTAL
nb_mesh = 2//obj_file_random.length
// nb analyse demandé
// ---> nb analyse demandé
nb_analyse_demande = 2
list_idx_tache =[]
for (let p=0; p<nb_mesh; p++){list_idx_tache.push(p+1)}
list_idx_tache = shuffle(list_idx_tache)
@ -70,9 +72,9 @@ function init_variable(premier_appel){
texte_temporaire = {}
// temps de pop des messages
temps_pop = 2000
// text qui correspond à des erreurs de bouton
// text qui correspond à des erreurs de bouton
longueur_max_error = 700
// text
// text
longueur_max_recap = 350
// Fenetre 3D
@ -86,14 +88,14 @@ function init_variable(premier_appel){
// Enchainement des pages
if (premier_appel){
page_avertissement = false
page_avertissement = true
page_contexte = false
page_inscription = false
page_explication = false
page_warning = false
page_explication_bis = false
page_vues = true // false
page_explication_analyse = false
page_vues = false // false
page_explication_analyse = false
page_analyse = false
// cas raz : on recommence juste la partie vues
} else {
@ -104,7 +106,7 @@ function init_variable(premier_appel){
page_warning = false
page_explication_bis = false
page_vues = true // false
page_explication_analyse = false
page_explication_analyse = false
page_analyse = false
}
@ -115,14 +117,14 @@ function init_variable(premier_appel){
// pour initialiser les claviers à chaque page
premier_tour_page_avertissements = true
premier_tour_page_contexte = true
premier_tour_page_inscription = true
premier_tour_page_inscription = true
premier_tour_page_explications = true
premier_tour_page_warning = true
premier_tour_page_vues = true
premier_tour_page_explication_analyse = true
premier_tour_page_analyse = true
premier_tour_page_analyse = true
// message de fin
// message de fin
message_fin = "> Sending data in progress ..."
envoie_termine = false
@ -137,29 +139,29 @@ function setUp_light(rayon){
const intensity = 0.22;
// Light
const light1 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light1 );
const dir_light1 = new THREE.DirectionalLight(color, intensity);
scene.add( light1 );
const dir_light1 = new THREE.DirectionalLight(color, intensity);
dir_light1.position.set(rayon, 0, 0);
scene.add(dir_light1);
const light2 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light2 );
const dir_light2 = new THREE.DirectionalLight(color, intensity);
scene.add( light2 );
const dir_light2 = new THREE.DirectionalLight(color, intensity);
dir_light2.position.set(-rayon, 0, -0);
scene.add(dir_light2);
const light3 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light3 );
const dir_light3 = new THREE.DirectionalLight(color, intensity);
scene.add( light3 );
const dir_light3 = new THREE.DirectionalLight(color, intensity);
dir_light3.position.set(0, -rayon, 0);
scene.add(dir_light3);
const light4 = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light4 );
const dir_light4 = new THREE.DirectionalLight(color, intensity);
scene.add( light4 );
const dir_light4 = new THREE.DirectionalLight(color, intensity);
dir_light4.position.set(0, rayon, -0);
scene.add(dir_light4);
}
// idx_mesh : position du premier mesh a visuionner --> version aléatoire ???
@ -170,7 +172,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
theta_init = 2*Math.PI * ( (2/8)*(idx_j_init==0) + (1/8)*(idx_j_init==1) + (-1/8)*(idx_j_init==3) + (-2/8)*(idx_j_init==4))
delta_init = 2*Math.PI * (idx_i_init/8)
// initialisation
// initialisation
idx_i = idx_i_init
idx_j = idx_j_init
@ -189,7 +191,7 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
preserveDrawingBuffer: true } );
renderer.setSize(W_3D , H_3D);
old_renderer = document.getElementById('renderer')
if (old_renderer!= null){
old_renderer.parentElement.removeChild(old_renderer)
@ -213,10 +215,10 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
canvas.height = window.innerHeight;
ctx = canvas.getContext("2d")
// On crée autant de canvas que de choix demandé,
// ces canvas seront vide tant qu'il n'y a pas de vue sélectionnée
// puis updates en fonction des actions faites
// puis updates en fonction des actions faites
canvasMins = []
ctxMins = []
for (let i = 0; i < nb_choix_demande; i++) {
@ -236,15 +238,15 @@ function setUp_3D(idx_mesh, idx_i_init, idx_j_init, explication=false){
// Si on load le mesh 3d dans les explication, on importe que ce soit le dragon
if (explication){
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => {
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_user_study_normed.obj', (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/dragon_update_normed_centered_user_study.obj', (event) => {
const root = event.detail.loaderRootNode;
scene.add(root);
});
// sinon on est dans l'étide dans on fait du random entre tous les mesh dispo sur le git
} else {
//objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/User_study/main/3DMesh/'+obj_file_random[idx_mesh], (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => {
objLoader.load('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/3DMesh/'+obj_file_random[idx_mesh], (event) => {
const root = event.detail.loaderRootNode;
scene.add(root);
});
@ -274,7 +276,7 @@ function init_data(){
// Data 2D
imgs = {}
imgs["droite"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_droite.png')
imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png')
imgs["gauche"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_gauche.png')
imgs["bas"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_bas.png')
imgs["haut"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Arrows/fleche_haut.png')
imgs["croix"] = new_image('https://raw.githubusercontent.com/PelissierCombescure/BVS-study/main/graphics/Choices/croix.png')
@ -321,6 +323,26 @@ function init_data(){
}
function enregistrement(callback) {
// Création de la requête HTTP à envoyer au serveur.
let xhr = new XMLHttpRequest();
// Préparation de la requête pour l'envoi en POST vers l'url.
xhr.open('POST', '/outputs');
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
xhr.onreadystatechange = function() {
//interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])})
// 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) {
if (typeof callback === 'function') {
callback(xhr);
}
}
}
// Envoi de la requête vers le serveur, avec les données.
xhr.send(JSON.stringify(choix));
}
function animate() {
// Temps à chaque animate
@ -351,7 +373,7 @@ function animate() {
premier_tour_page_contexte = false
}
init_clavier_contexte()
traitement_contexte()
traitement_contexte()
}
////////////////////////////////////////////////////////////////////////////////
// page inscription
@ -364,7 +386,7 @@ function animate() {
init_clavier_inscription()
afficher_champs_inscription()
premier_tour_page_inscription=false}
traitement_inscription()
traitement_inscription()
}
////////////////////////////////////////////////////////////////////////////////
if (page_explication){
@ -384,7 +406,7 @@ function animate() {
setUp_3D(indice_mesh, idx_i_explication, idx_j_explication, explication=true)
premier_tour_page_explications = false
}
// Nettoyage
// Nettoyage
ctx.clearRect(0, 0, canvas.width, canvas.height)
// Affichage bouton RAZ
if (bouton_raz_clicked == true){action_bouton_raz()}
@ -413,7 +435,7 @@ function animate() {
// RAZ
clicked = false
which_clicked_fleche = -1
which_clicked_bouton = -1
which_clicked_bouton = -1
}
// page warning
if(page_warning){
@ -427,7 +449,7 @@ function animate() {
if (page_explication_bis){
ctx.clearRect(0, 0, canvas.width, canvas.height)
//console.log("boucle explication2")
commencer_etude()
commencer_etude()
}
////////////////////////////////////////////////////////////////////////////////
// page de choix
@ -470,7 +492,7 @@ function animate() {
// traitement fleche (surval + click)
traitement_fleche()
// traitement bouton : (survol + click)
traitement_bouton()
traitement_bouton()
// afficher + maj du recap de pose choisie : affichage des vue des poses
afficher_recap()
// Affichage texte recap
@ -492,6 +514,7 @@ function animate() {
document.removeEventListener("keydown", action_clavier_vues)
// inti clavier
if(premier_tour_page_explication_analyse){
enregistrement();
//interactions.push({"time": new Date().getTime(), "type": "Début explication analyse"})
init_clavier_explication_analyse()
init_textes_explication_analyses()
@ -518,14 +541,14 @@ function animate() {
}
premier_tour_page_analyse = false}
ctx.clearRect(0, 0, canvas.width, canvas.height)
traitement_analyse()
try {
if (!input2.matches(":focus")) {
input2.focus()
}
} catch (e) {}
} catch (e) {}
}
////////////////////////////////////////////////////////////////////////////////
// page fin
@ -533,39 +556,26 @@ function animate() {
//console.log("boucle fin")
// on enlève les touches du clavier associé à la page vues
document.removeEventListener("keydown", action_clavier_analyse)
// clear la fenetre
// clear la fenetre
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
draw_rectangle(0,0,canvas.width, canvas.height, "rgb(3, 26, 33)", 1)
// Texte
// Texte
affichage_texte_fin(message_fin)
// ECRITURE DES RESULTATS
choix['Analyse'] = checkbox_clicked
choix['Interactions'] = interactions
// Création de la requête HTTP à envoyer au serveur.
let xhr = new XMLHttpRequest();
// Préparation de la requête pour l'envoi en POST vers l'url.
xhr.open('POST', '/outputs');
// Si on envoie les données de manière classique, il faut configurer le header de cette façon.
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// Ajout du listener pour déclencer la suite lorsque la requête sera terminée.
xhr.onreadystatechange = function() {
//interactions.push({"time": new Date().getTime(), "type": get_message("fin_eetude", [])})
// 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. You can close the web page."
envoie_termine = true
update_texte_fin(message_fin)
interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])})
return;
}
}
// Envoi de la requête vers le serveur, avec les données.
xhr.send(JSON.stringify(choix));
enregistrement(function(xhr) {
console.log(xhr.responseText);
message_fin = "> It's done. Your submission has been recorded."
envoie_termine = true
update_texte_fin(message_fin)
interactions.push({"time": new Date().getTime(), "type": get_message("fin_etude", [])})
return;
});
return
}
////////////////////////////////////////////////////////////////////////////////
// Boucle sur animate

View File

@ -276,24 +276,27 @@ function traitement_fleche(){
function action_fleche_gauche(){
idx_i = (idx_i+1)%8
interactions.push({"time": new Date().getTime(), "type": get_message('FG', [num_tache, nb_choix_fait, idx_i, idx_j])})}
function action_fleche_droite(){
idx_i = (idx_i+7)%8
interactions.push({"time": new Date().getTime(), "type": get_message('FD', [num_tache, nb_choix_fait, idx_i, idx_j])})}
function action_fleche_haut(){
interactions.push({"time": new Date().getTime(), "type": get_message('FH', [num_tache, nb_choix_fait, idx_i, idx_j])})
if (idx_j == 0){
texte_temporaire = {"text": "You can't go any further, GO BACK DOWN.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_FH", [num_tache, nb_choix_fait]) })
}
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_FH", [num_tache, nb_choix_fait]) })}
idx_j = Math.max(idx_j-1,0)
interactions.push({"time": new Date().getTime(), "type": get_message('FH', [num_tache, nb_choix_fait, idx_i, idx_j])})
}
function action_fleche_bas(){
interactions.push({"time": new Date().getTime(), "type": get_message('FB', [num_tache, nb_choix_fait, idx_i, idx_j])})
if (idx_j == 4){
texte_temporaire = {"text": "You can't go any further, GO UP.", "x": x_pop_up, "y": y_pop_up, "t_end": new Date().getTime()+temps_pop}
interactions.push({"time": new Date().getTime(), "type": get_message("erreur_FB", [num_tache, nb_choix_fait]) })
}
idx_j = Math.min(idx_j+1,4)
interactions.push({"time": new Date().getTime(), "type": get_message('FB', [num_tache, nb_choix_fait, idx_i, idx_j])})
}
///////////////////////////////////////////////////////////////

View File

@ -199,7 +199,7 @@ textes_contexte={
"texte6":{"t":"For example, this is wolf. This perspective highlights the tail and the hind legs, but obscures the head and face.", "y": window.innerHeight*0.45, "c": color_blanc},
"texte7":{"t":"This viewpoint reveal the head, face, and front legs but hides the tail and barely shows the hind legs.", "y": window.innerHeight*0.6, "c": color_blanc},
"texte8":{"t":"What is a good viewpoint?", "y": window.innerHeight*0.15, "c": color_rouge},
"texte9":{"t":"> A good viewpoint is one that offers a relevant view of the object. The one that best showcases the object.", "y": window.innerHeight*0.2, "c": color_blanc},//A more geometrical definition: a good viewpoint is a position from which most representative characteristics of an object (i.e. the parts that make the object the most identifiable), are visible.", "y": window.innerHeight*0.2, "c": color_blanc},
"texte9":{"t":"> A good viewpoint is one that offers a RELEVANT view of the object. The one that BEST showcases/highlights the and the one that is the most REPRENSATATIVE of the object. ", "y": window.innerHeight*0.2, "c": color_blanc},//A more geometrical definition: a good viewpoint is a position from which most representative characteristics of an object (i.e. the parts that make the object the most identifiable), are visible.", "y": window.innerHeight*0.2, "c": color_blanc},
"texte10":{"t":"Let's imagine that you have to create an advertising display to promote the movie Dances with Wolves.", "y": window.innerHeight*0.35, "c": color_blanc},
//"texte11":{"t":"The purpose of this study is to ask you, for a given object, which are for you the best viewpoints and why. The answers will of course be subjective because everyone has their own opinion. This subjective information is what I am interested in.", "y": window.innerHeight*0.7, "c": color_blanc},
"texte11": {"t":"Which viewpoint would you choose between both?", "y": window.innerHeight*0.8, "c": "rgb(255, 209, 102)"},

View File

@ -163,9 +163,9 @@ color_blanc = "rgb(255,255,255)"
color_rouge = "rgb(239, 71, 111)"
explications_analyse={
"texte0":{"t":"You have finished selecting the best viewpoints for each object.", "y": window.innerHeight*0.15, "c": color_blanc},
"texte1":{"t":"Now I ask you to justify your choices.", "y":window.innerHeight*0.25, "c": color_blanc},
"texte1":{"t":"Now I ask you to JUSTIFY your choices.", "y":window.innerHeight*0.25, "c": color_blanc},
"texte2":{"t":"For this, for some objects, the views you have chosen will reappear.", "y":window.innerHeight*0.38, "c": color_blanc},
"texte3":{"t":"For each of the viewpoints, you will have to select one or more reasons that made you decide to select these viewpoints. And order them from the most significant to the least.", "y": window.innerHeight*0.52, "c": color_blanc},
"texte3":{"t":"For each of the viewpoints, you will have to SELECT ONE OR MORE reasons that made you decide to select these viewpoints. And ORDER them from the most significant to the least.", "y": window.innerHeight*0.52, "c": color_blanc},
}
explications_analyse_page_1 = [explications_analyse["texte0"], explications_analyse["texte1"], explications_analyse["texte2"], explications_analyse["texte3"]]

View File

@ -565,9 +565,11 @@ function action_clavier_explication(event){
action_suivante()}
}
if (page_warning && num_warning < (warnings_page_1.length-1)){
if (page_warning && num_warning < (warnings_page_1.length)){
console.log("cc")
action_bouton_suivant_warning()}
if (page_warning && num_warning == (warnings_page_1.length-1)){
if (page_warning && num_warning == (warnings_page_1.length)){
console.log("ee")
action_bouton_commencer_warning()
}

View File

@ -37,6 +37,8 @@ function affichage_texte_fin(M_fin){
affichage_titre(M_fin, (0.02*window.innerWidth)+"pt Courier", "#FFFFFF", yt=0.6*window.innerHeight)
affichage_titre("Your completion code is : C30H3F5I", (0.02*window.innerWidth)+"pt Courier", "#EF476F", yt=0.8*window.innerHeight)
}
function update_texte_fin(M_fin){

View File

@ -15,20 +15,25 @@ function affichage_inscription(){
// ctx.font = font
// largeur = ctx.measureText(texte).width
// ctx.fillText(texte, (window.innerWidth/2)- (largeur/2), 100)
titre = "Personal Information"
titre = "Information"
affichage_titre(titre, taille_titre_insription+"pt Courier", "#EF476F")
// Pour les zones de textes
ctx.strokeStyle = "rgb(255, 255, 255)"
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.font = taille_texte_inscription+"pt Courier"
//ctx.fillText("Firstname:", x_texte_zone, parseInt(document.getElementById("Firstname").style.top) -12)
ctx.fillText("Pseudo:", x_texte_zone, parseInt(document.getElementById("Pseudo").style.top) - 12)
ctx.fillText("Age:", x_texte_zone, parseInt(document.getElementById("Age").style.top) - 12)
ctx.fillText("Gender:", parseInt(document.getElementById("SexeM").style.left), parseInt(document.getElementById("SexeM").style.top) - 22)
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)
//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)
}
//////////////////////////////////////////////////////////////
@ -128,11 +133,15 @@ function champs_remplis_correctment(){
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("Pseudo").value.length >0 && (value_non_vide(document.getElementById("Pseudo").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}
//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}
//return firstname_ok && name_ok && age_ok && sexe_ok
return name_ok && age_ok && sexe_ok
//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
}
function value_non_vide(V){
@ -145,12 +154,12 @@ function value_non_vide(V){
function afficher_champs_inscription() {
inscription_finie = false
w_text_zone = 0.015*window.innerWidth
w_text_zone = 0.02*window.innerWidth
h_text_zone = 0.05*window.innerHeight
nb_caract_min = 1
nb_caract_max = 30
x_texte_zone = (window.innerWidth/4)
y_texte_zone = 0.20*window.innerHeight
y_texte_zone = 0.40*window.innerHeight
ecart_texte_zone = 0.2*window.innerHeight
@ -187,85 +196,90 @@ function afficher_champs_inscription() {
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
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 : 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();
// 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
// // 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();
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 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();
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();
//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();
}
function gestion_donnees_personnelles(){
// Sauvegarde des infos
if (document.getElementById("SexeM").checked){sexe = "M"}
else if (document.getElementById("SexeF").checked){sexe = "F"}
else if (document.getElementById("SexeM").checked){sexe = "M"}
else {sexe='None'}
//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'}
choix['identite'] = {//"Firstname":document.getElementById("Firstname").value,
"Pseudo": document.getElementById("Pseudo").value,
"Age": document.getElementById("Age").value,
"Sexe": sexe}
//Prolific "Age": document.getElementById("Age").value,
//Prolific "Sexe": sexe
}
//document.getElementById("Firstname").style.display = 'none'
document.getElementById("Pseudo").style.display = 'none'
document.getElementById("Age").style.display = 'none'
document.getElementById("SexeM").style.display = 'none'
document.getElementById("SexeF").style.display = 'none'
document.getElementById("SexeA").style.display = 'none'
//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'
}

View File

@ -105,7 +105,17 @@ function traitement_warnings(){
// 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)
// message : problems --> refresh
if (p==4){
affichage_titre(dict_texte.t, (0.016*window.innerWidth)+"pt Courier", "#EF476F", dict_texte.y)
//affichage_texte_warning(dict_texte.t, font_texte, "#EF476F", x_texte, dict_texte.y, w_texte)
}
else if (p==5){
affichage_titre(dict_texte.t, font_texte, dict_texte.c, dict_texte.y)
//affichage_texte_warning(dict_texte.t, font_texte, "#EF476F", x_texte, dict_texte.y, w_texte)
}
else {
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){
@ -152,13 +162,15 @@ 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":"- 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},
"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},
"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},
"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 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},
"texte4":{"t":"If ANY PROBLEMS occur during the study --> REFRESH your web page", "y": window.innerHeight*0.72, "c": color_blanc},
"texte5":{"t":"(don't be afraid, you will start all over again)", "y": window.innerHeight*0.78, "c": color_blanc}
}
warnings_page_1 = [warnings["texte0"], warnings["texte1"], warnings["texte2"], warnings["texte3"], warnings["texte4"]]
warnings_page_1 = [warnings["texte0"], warnings["texte1"], warnings["texte2"], warnings["texte3"], warnings["texte4"], warnings["texte5"]]
warnings_a_afficher = [warnings["texte0"]]
}

View File

@ -1,58 +1,53 @@
// obj_names = ['octopus_update_normed_centered_user_study.obj',
// 'casting_update_normed_centered_user_study.obj',
// 'carVasa_update_normed_centered_user_study.obj',
// 'blade_update_normed_centered_user_study.obj',
// 'bunny_update_normed_centered_user_study.obj',
// 'igea_update_normed_centered_user_study.obj',
// 'camel_update_normed_centered_user_study.obj',
// 'Harley_update_normed_centered_user_study.obj',
// 'MaxPlanck_update_normed_centered_user_study.obj',
// 'gorgoile_update_normed_centered_user_study.obj',
// 'prot_update_normed_centered_user_study.obj',
// 'michael3_update_normed_centered_user_study.obj',
// 'A380_update_normed_centered_user_study.obj',
// 'chair107_update_normed_centered_user_study.obj',
// 'dragon_update_normed_centered_user_study.obj',
// 'rockerArm_update_normed_centered_user_study.obj',
// 'michael8_update_normed_centered_user_study.obj',
// 'vase_update_normed_centered_user_study.obj',
// 'fandisk_update_normed_centered_user_study.obj',
// 'james_update_normed_centered_user_study.obj',
// 'cow_update_normed_centered_user_study.obj',
// 'dinosaur_update_normed_centered_user_study.obj',
// 'flowerpot_update_normed_centered_user_study.obj',
// 'bimba_update_normed_centered_user_study.obj',
// 'horse_update_normed_centered_user_study.obj',
// 'turbine_update_normed_centered_user_study.obj',
// 'basket_regulier_tri_normed_centered_user_study.obj',
// 'calculator_regulier_tri_normed_centered_user_study.obj',
// 'eyeglasses_regulier_tri_normed_centered_user_study.obj',
// 'cap_regulier_tri_normed_centered_user_study.obj',
// 'camera_regulier_tri_normed_centered_user_study.obj',
// 'bus_regulier_tri_normed_centered_user_study.obj',
// 'cup_regulier_tri_normed_centered_user_study.obj',
// 'backpack_regulier_tri_normed_centered_user_study.obj',
// 'comb_regulier_tri_normed_centered_user_study.obj',
// 'fire_extinguisher_regulier_tri_normed_centered_user_study.obj',
// 'bicycle_regulier_tri_normed_centered_user_study.obj',
// 'coffee_regulier_tri_normed_centered_user_study.obj',
// 'boat_regulier_tri_normed_centered_user_study.obj',
// 'ashtray_regulier_tri_normed_centered_user_study.obj',
// 'eraser_regulier_tri_normed_centered_user_study.obj',
// 'bucket_regulier_tri_normed_centered_user_study.obj',
// 'bench_regulier_tri_normed_centered_user_study.obj',
// 'cabinet_regulier_tri_normed_centered_user_study.obj']
//obj_names = ['backpack_regulier_tri_normed_centered_user_study.obj']
obj_names = ['octopus_update_normed_centered_user_study.obj',
'casting_update_normed_centered_user_study.obj',
'carVasa_update_normed_centered_user_study.obj',
'blade_update_normed_centered_user_study.obj',
'bunny_update_normed_centered_user_study.obj',
'igea_update_normed_centered_user_study.obj',
'camel_update_normed_centered_user_study.obj',
'Harley_update_normed_centered_user_study.obj',
'MaxPlanck_update_normed_centered_user_study.obj',
'gorgoile_update_normed_centered_user_study.obj',
'prot_update_normed_centered_user_study.obj',
'michael3_update_normed_centered_user_study.obj',
'A380_update_normed_centered_user_study.obj',
'chair107_update_normed_centered_user_study.obj',
'dragon_update_normed_centered_user_study.obj',
'rockerArm_update_normed_centered_user_study.obj',
'michael8_update_normed_centered_user_study.obj',
'vase_update_normed_centered_user_study.obj',
'fandisk_update_normed_centered_user_study.obj',
'james_update_normed_centered_user_study.obj',
'cow_update_normed_centered_user_study.obj',
'dinosaur_update_normed_centered_user_study.obj',
'flowerpot_update_normed_centered_user_study.obj',
'bimba_update_normed_centered_user_study.obj',
'horse_update_normed_centered_user_study.obj',
'turbine_update_normed_centered_user_study.obj',
'basket_regulier_tri_normed_centered_user_study.obj',
'calculator_regulier_tri_normed_centered_user_study.obj',
'eyeglasses_regulier_tri_normed_centered_user_study.obj',
'cap_regulier_tri_normed_centered_user_study.obj',
'camera_regulier_tri_normed_centered_user_study.obj',
'bus_regulier_tri_normed_centered_user_study.obj',
'cup_regulier_tri_normed_centered_user_study.obj',
'backpack_regulier_tri_normed_centered_user_study.obj',
'comb_regulier_tri_normed_centered_user_study.obj',
'fire_extinguisher_regulier_tri_normed_centered_user_study.obj',
'bicycle_regulier_tri_normed_centered_user_study.obj',
'coffee_regulier_tri_normed_centered_user_study.obj',
'boat_regulier_tri_normed_centered_user_study.obj',
'ashtray_regulier_tri_normed_centered_user_study.obj',
'eraser_regulier_tri_normed_centered_user_study.obj',
'bucket_regulier_tri_normed_centered_user_study.obj',
'bench_regulier_tri_normed_centered_user_study.obj',
'cabinet_regulier_tri_normed_centered_user_study.obj']
//obj_names = [ 'octopus_update_normed_centered_user_study.obj',
// obj_names = [
// 'octopus_update_normed_centered_user_study.obj',
// 'casting_update_normed_centered_user_study.obj',
// 'carVasa_update_normed_centered_user_study.obj',
// 'blade_update_normed_centered_user_study.obj',
@ -77,10 +72,11 @@
// 'flowerpot_update_normed_centered_user_study.obj',
// 'bimba_update_normed_centered_user_study.obj',
// 'horse_update_normed_centered_user_study.obj',
// 'turbine_update_normed_centered_user_study.obj']
// 'turbine_update_normed_centered_user_study.obj'
//]
obj_names = [//'basket_regulier_tri_normed_centered_user_study.obj',
//obj_names = [//'basket_regulier_tri_normed_centered_user_study.obj',
//'calculator_regulier_tri_normed_centered_user_study.obj',
//'eyeglasses_regulier_tri_normed_centered_user_study.obj',
//'cap_regulier_tri_normed_centered_user_study.obj',
@ -93,9 +89,9 @@
//'bicycle_regulier_tri_normed_centered_user_study.obj',
//'coffee_regulier_tri_normed_centered_user_study.obj',
//'boat_regulier_tri_normed_centered_user_study.obj',
'ashtray_regulier2_tri.obj',
//'ashtray_regulier_tri_normed_centered_user_study.obj',
//'eraser_regulier_tri_normed_centered_user_study.obj',
//'bucket_regulier_tri_normed_centered_user_study.obj',
//'bench_regulier_tri_normed_centered_user_study.obj',
//'cabinet_regulier_tri_normed_centered_user_study.obj'
]
//]