timbre-study/phase_description.html at master · nerrull/timbre-study · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>

<head>
    <script src="javascript/jquery-3.1.1.min.js"></script>
    <script src="/assets/javascripts/jatos.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <link href="static/css/forms.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
    <div class= "TaskDescription">

        <div id="description_div"></div>
        <div id="reminder"></div>
        <button id="continue" type="button" class="btn btn-success">Continue</button>
        </div>
        </div>
    </div>

    <script>

        function sessionSuccess(){
            console.log("Succesfully sent session data");
            console.log(jatos.studySessionData);
        }

        function sessionFailure(){
            console.log("Failed to send session data");
        }

        jatos.onLoad(function () {
            var lang = "default";
            if (jatos.studySessionData.language){
                lang = jatos.studySessionData.language
            }
            if (lang=="fr"){
                $("#continue").text("Continuer");
            }

             //Load the correct description and display it
             $.ajax({
                    url:"static/html/task_descriptions.html",
                    type:'GET',
                    success: function(data) {
                        console.log("Task type : " +jatos.studySessionData["task_type"])
                        console.log("Language: "+lang)
                        var description;
                        let task_type = jatos.studySessionData["task_type"]
                        var description_id = "";
                        let reminder = $('<div>').append(data).find('#general_reminder').find(`#${lang}`)

                        // if (jatos.studySessionData.phase_index ==0){
                        //     description_id = "practice_phase_1";
                        //     description = $('<div>').append(data).find(`#${description_id}`).find(`#${lang}`);

                        // }
                        if (jatos.studySessionData.phase_index ==0){
                            description_id = "practice_phase_2";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${lang}`);
                        }

                        else if (jatos.studySessionData.phase_index ==1){
                            description_id = "phase_1";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${lang}`);
                            $("#reminder").html(reminder);
                        }
                        else if (jatos.studySessionData.phase_index ==2){
                            description_id = "phase_1_fast";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${lang}`);
                            $("#reminder").html(reminder);
                        }
                        else if (jatos.studySessionData.phase_index ==3){
                            description_id = "phase_2";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${task_type}`).find(`#${lang}`);
                            $("#reminder").html(reminder);
                        }
                        else if (jatos.studySessionData.phase_index ==4){
                            description_id = "phase_2_fast";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${lang}`);
                            $("#reminder").html(reminder);

                        }
                        else if (jatos.studySessionData.phase_index ==5){
                            description_id = "phase_3";
                            description = $('<div>').append(data).find(`#${description_id}`).find(`#${task_type}`).find(`#${lang}`);
                            $("#reminder").html(reminder);
                        }

                        console.log(description_id)
                        console.log(description)
                        // console.log(description.html())

                        $('#description_div').html( description );

                        mode_strings = {
                            "default":{
                                "COLOR":"colors",
                                "TEXTURE":"visual texture",
                                "SHAPE":"shapes"
                            },
                            "fr":{
                                "COLOR":"couleurs",
                                "TEXTURE":"textures visuelles",
                                "SHAPE":"formes"
                            }
                        }
                        document.body.innerHTML = document.body.innerHTML.replace(/MODE_STRING/g, mode_strings[lang][task_type]);
                        $('#description_div').html( function(_, ctx){

                                return ctx.replace(/MODE_STRING/g, mode_strings[lang][task_type]);
                            });
                    $("#continue").click(function(){
                        jatos.startNextComponent()
                    });
                    }

                });

                });
        </script>
    </body>
</html>