Data saving my sql #3007

Nega100 · 2023-04-13T18:25:40Z

Nega100
Apr 13, 2023

Hi all,
I just combine jspsych plugins with Construct game. Jspsych plugins is saving in table_data_1 and have 3 output (scale 1, scale 2 and scale 3) and data log from construct game is in table game_data_1 (level 1, level 2 and level 3). I did all the test and so far data save correctly in my database phpmyadmins. However when I ask my friends to play the game and rate it, from 5 people only 1 that have correct data (scale 1, 2 and 3), the others just have partial data (only scale 1 or scale 2 or scale 3). Mean while all the construct game save correctly (level 1, level 2 and level 3)
Why this is happen? Since I dont have much experience in backend database I need help from experts.
Thanks

jodeleeuw · 2023-04-14T17:01:24Z

jodeleeuw
Apr 14, 2023
Maintainer

Hi @Nega100,

I don't think there's enough information here to answer your question. This could be a database configuration problem, a problem with data loss over a network, or perhaps folks not finishing the experiment. Can you figure out how to reproduce the problem of missing data when you run the experiment?

1 reply

Nega100 Apr 14, 2023
Author

Thanks Joss
I am really confusing right now, all my friend did the task correctly and the connection also strong, so there is no problem with the connection. This is my code, Q0, Q1, Q2 and Q3.

<!DOCTYPE html>
<html>
    <head>
        <title>Q0</title>
        <meta charset="utf-8">
        <script src="../jspsych.js"></script>
        <script src="../plugins/jspsych-html-button-response.js"></script>
        <script src="../plugins/jspsych-survey-likert-panas.js"></script>
        <script src="../plugins/jspsych-survey-likert.js"></script>
        <script src="../plugins/jspsych-html-keyboard-response.js"></script>
        <script src="../plugins/jspsych-instructions.js"></script>
        <script src="../plugins/jspsych-survey-text.js"></script>
        <script src="../plugins/jspsych-survey-multi-choice.js"></script>
        <link rel="stylesheet" href="../css/jspsych.css">
        <style type="text/css">
            .center {display: block;margin-left: auto;margin-right: auto;width: 50%;}
            .jspsych-btn{margin-top: 50px; margin-bottom: 20px;padding-top: 10px; padding-bottom: 10px; padding-right: 20px;padding-left: 20px;}
            .jspsych-btn{background-color:chartreuse;}
            .jspsych-survey-likert-opts li input[type="radio"]{height: 20px; width: 20px; margin-bottom: 1em; margin-left: -15px !important;}
    	    .jspsych-survey-likert-opts::before{top: 20px !important;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form p{text-align:center;}
            .jspsych-content{width: 100%;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form .jspsych-survey-likert-statement p{font-size: 150%;margin:0px}
                span.required {display: none;}
            input[type='radio'] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 100%;
            width: 20px;height: 20px;border: 2px solid rgb(12, 12, 12);transition: 0.2s all linear;margin-right: 5px;position: relative; background-color:white}
            input:checked {border: 8px solid black;outline: unset !important;}
        </style>
    </head>
    <body> 
        </body>
    <script>
        var timeline = [];
        
        var consent_text = ["<b>Yes, I agree.</b>",
                            "<b>No, I am not agree.</b>"];

        var consent_block = {
        type: 'survey-multi-choice',
        preamble: ['<h1 style="text-align: center;">Example consent</h1>'],
        questions: [
            {prompt: "<b>Consent agreement.</b>", options: consent_text, required:true, name: 'consent_resp'}],
             button_label: "Next",
        on_finish: function(data) {
        var responses = JSON.parse(data.responses);
        //jsPsych.data.addProperties(responses);
        /*jsPsych.data.addProperties( properties= {
            consent_resp: data.responses.consent_resp,
            consent_resp_1: data.responses.consent_resp_1,
            consent_resp_2: data.responses.consent_resp_2,
            consent_resp_3: data.responses.consent_resp_3,
            consent_resp_4: data.responses.consent_resp_4,
            consent_resp_5: data.responses.consent_resp_5,
            consent_resp_6: data.responses.consent_resp_6,
        });*/
        if (responses.consent_resp == '<b>No, I am not agree.</b>') {
            jsPsych.endExperiment('<p><b>Thank and  you can close the browser.</b></p>')}
          }
        };
        timeline.push(consent_block)

    var block_1 = {
        type: 'html-button-response',
        stimulus: '<p style="font-weight: bold; font-size: 20px;">Instruction to fill the scale for first game</p>',
        choices:  ['Next']
        };
        timeline.push(block_1)
        
    var to_game_1 = {
            type: 'html-keyboard-response',
            stimulus: '<p style="font-weight: bold; font-size: 20px;"><b>wait 10 second to loading game </b></p>'+
                      '<p style="font-weight: bold; font-size: 20px;"><b>click the next button to play the game</b></p>',
            choices: jsPsych.NO_KEYS,
            trial_duration: 10000
        };
        timeline.push(to_game_1)

        
    function saveData() {
    var xhr = new XMLHttpRequest();
    var urlvar = jsPsych.data.urlVariables();
    var link = "core/write_data.php?database=" + urlvar.database;
    xhr.open("POST", link); // change 'write_data.php' to point to php script.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
        if (xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response.success);
        }
    };
    xhr.send(jsPsych.data.get().json());
}
    
    jsPsych.init({
    timeline: timeline,
    on_finish: function () {
        var user_responden = jsPsych.data.get().first(1).values()[0].responses;
        var user_responden = JSON.parse(user_responden);
        jsPsych.data.get().addToAll({ responden_id: Math.floor((Math.random()*10000) + 1) + user_responden.Name});
        //console.log('test');
        saveData()
        //.data.displayData();
        }
})

    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Q1</title>
        <meta charset="utf-8">
        <script src="../jspsych.js"></script>
        <script src="../plugins/jspsych-html-button-response.js"></script>
        <script src="../plugins/jspsych-survey-likert-panas.js"></script>
        <script src="../plugins/jspsych-survey-likert.js"></script>
        <script src="../plugins/jspsych-html-keyboard-response.js"></script>
        <script src="../plugins/jspsych-instructions.js"></script>
        <script src="../plugins/jspsych-survey-text.js"></script>
        <script src="../plugins/jspsych-survey-multi-choice.js"></script>
        <link rel="stylesheet" href="../css/jspsych.css">
        <style type="text/css">
            .center {display: block;margin-left: auto;margin-right: auto;width: 50%;}
            .jspsych-btn{margin-top: 50px; margin-bottom: 20px;padding-top: 10px; padding-bottom: 10px; padding-right: 20px;padding-left: 20px;}
            .jspsych-btn{background-color:chartreuse;}
            .jspsych-survey-likert-opts li input[type="radio"]{height: 20px; width: 20px; margin-bottom: 1em; margin-left: -15px !important;}
    	    .jspsych-survey-likert-opts::before{top: 20px !important;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form p{text-align:center;}
            .jspsych-content{width: 100%;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form .jspsych-survey-likert-statement p{font-size: 150%;margin:0px}
                span.required {display: none;}
            input[type='radio'] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 100%;
            width: 20px;height: 20px;border: 2px solid rgb(12, 12, 12);transition: 0.2s all linear;margin-right: 5px;position: relative; background-color:white}
            input:checked {border: 8px solid black;outline: unset !important;}
        </style>
    </head>
    <body> <!--.jspsych-btn .jspsych-survey-text #jspsych-survey-text-next {margin-top: 20px; margin-bottom: 20px; margin-left: 20px;}-->
        </body>
    <script>
        var timeline = [];
        
        var consent_1 = {
            type: 'html-button-response',
            stimulus: '<p style="font-weight: bold; font-size: 20px">Instruction after play the first game</p>'+
                      '<p style="font-weight: bold; font-size: 20px">Instruction to fill the scale for first game</p>',
            choices: ['<b>NEXT</b>'],
            margin_vertical: '0px',
            on_finish: function (data) {
                var button_pressed = JSON.parse(data.button_pressed);
            },
        };
        timeline.push(consent_1)
        
        var scale = ['Irrelevant', 'relevant'];


        var likert_game_1 = {
            type: 'survey-likert',
            questions: [
                {prompt: "<p style='font-size:18px;'><b><i>user friendly gameplay</i></b></p>", name: 'score_usability', labels: scale, required: true },
              ],
            post_trial_gap: 500,
            scale_width: 800,
            button_label:"next",
            on_finish: function (data) {
                var responses = JSON.parse(data.responses);
                responses.score_usability = responses.score_usability + 1;
                data.responses = JSON.stringify(responses);
            }
        };
        timeline.push(likert_game_1)
        
    var surve_1 = {
        type:'survey-text',
        questions: [{prompt:'Fill the blank for game improvement', placeholder:'Write here', rows:10, columns:80}],
        button_label: "Next"
    };
    timeline.push(surve_1)
        
    var to_game_2 = {
        type: 'html-keyboard-response',
        stimulus: '<p style="font-weight: bold; font-size: 20px">wait for 10 second and klik next to play the second game.</p>',
        choices:  jsPsych.NO_KEYS,
        trial_duration: 10000
    };
    timeline.push(to_game_2)

    function saveData() {
    var xhr = new XMLHttpRequest();
    var urlvar = jsPsych.data.urlVariables();
    var link = "core/write_data.php?database=" + urlvar.database;
    xhr.open("POST", link); // change 'write_data.php' to point to php script.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
        if (xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response.success);
        }
    };
    xhr.send(jsPsych.data.get().json());
}
    
    jsPsych.init({
    timeline: timeline,
    on_finish: function () {
        var user_responden_1 = jsPsych.data.get().first(1).values()[0].button_pressed;
        var user_responden_1 = JSON.parse(user_responden_1);
        jsPsych.data.get().addToAll({ responden_id: Math.floor((Math.random()*10000) + 1) + user_responden_1.Nama});
        saveData()
        }
})

/*jsPsych.init({
        timeline: timeline,
        on_finish: function () {
            //jsPsych.data.get().localSave('csv', 'kopian_data_anda.csv');
            jsPsych.data.displayData();
            //window.location.replace("https://psyjs.com/");
        }
    })*/


    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Q2</title>
        <meta charset="utf-8">
        <script src="../jspsych.js"></script>
        <script src="../plugins/jspsych-html-button-response.js"></script>
        <script src="../plugins/jspsych-survey-likert-panas.js"></script>
        <script src="../plugins/jspsych-survey-likert.js"></script>
        <script src="../plugins/jspsych-html-keyboard-response.js"></script>
        <script src="../plugins/jspsych-instructions.js"></script>
        <script src="../plugins/jspsych-survey-text.js"></script>
        <script src="../plugins/jspsych-survey-multi-choice.js"></script>
        <link rel="stylesheet" href="../css/jspsych.css">
        <style type="text/css">
            .center {display: block;margin-left: auto;margin-right: auto;width: 50%;}
            .jspsych-btn{margin-top: 50px; margin-bottom: 20px;padding-top: 10px; padding-bottom: 10px; padding-right: 20px;padding-left: 20px;}
            .jspsych-btn{background-color: chartreuse;}
            .jspsych-survey-likert-opts li input[type="radio"]{height: 20px; width: 20px; margin-bottom: 1em; margin-left: -15px !important;}
    	    .jspsych-survey-likert-opts::before{top: 20px !important;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form p{text-align:center;}
            .jspsych-content{width: 100%;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form .jspsych-survey-likert-statement p{font-size: 150%;margin:0px}
                span.required {display: none;}
            input[type='radio'] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 100%;
            width: 20px;height: 20px;border: 2px solid rgb(12, 12, 12);transition: 0.2s all linear;margin-right: 5px;position: relative; background-color:white}
            input:checked {border: 8px solid black;outline: unset !important;}
        </style>
    </head>
    <body> <!--.jspsych-btn .jspsych-survey-text #jspsych-survey-text-next {margin-top: 20px; margin-bottom: 20px; margin-left: 20px;}-->
        </body>
    <script>
        var timeline = [];
        
        var consent_2 = {
            type: 'html-button-response',
            stimulus: '<p style="font-weight: bold; font-size: 20px">Instruction after the second game</p>'+
                      '<p style="font-weight: bold; font-size: 20px">Instruction to fill the scale for second game</p>',
            choices: ['<b>NEXT</b>'],
            margin_vertical: '0px',
            on_finish: function (data) {
                var button_pressed = JSON.parse(data.button_pressed);
            },
        };
        timeline.push(consent_1)
        
        var scale = ['Irrelevant', 'relevant'];


        var likert_game_2 = {
            type: 'survey-likert',
            questions: [
                {prompt: "<p style='font-size:18px;'><b><i>user friendly gameplay</i></b></p>", name: 'score_usability', labels: scale, required: true },
              ],
            post_trial_gap: 500,
            scale_width: 800,
            button_label:"next",
            on_finish: function (data) {
                var responses = JSON.parse(data.responses);
                responses.score_usability = responses.score_usability + 1;
                data.responses = JSON.stringify(responses);
            }
        };
        timeline.push(likert_game_1)
        
    var surve_2 = {
        type:'survey-text',
        questions: [{prompt:'Fill the blank for game improvement', placeholder:'Write here', rows:10, columns:80}],
        button_label: "Next"
    };
    timeline.push(surve_1)
        
    var to_game_3 = {
        type: 'html-keyboard-response',
        stimulus: '<p style="font-weight: bold; font-size: 20px">wait for 10 second and klik next to play the second game.</p>',
        choices:  jsPsych.NO_KEYS,
        trial_duration: 10000
    };
    timeline.push(to_game_2)

    function saveData() {
    var xhr = new XMLHttpRequest();
    var urlvar = jsPsych.data.urlVariables();
    var link = "core/write_data.php?database=" + urlvar.database;
    xhr.open("POST", link); // change 'write_data.php' to point to php script.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
        if (xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response.success);
        }
    };
    xhr.send(jsPsych.data.get().json());
}
    
    jsPsych.init({
    timeline: timeline,
    on_finish: function () {
        var user_responden_2 = jsPsych.data.get().first(1).values()[0].button_pressed;
        var user_responden_2 = JSON.parse(user_responden_2);
        jsPsych.data.get().addToAll({ responden_id: Math.floor((Math.random()*10000) + 1) + user_responden_2.Nama});
        saveData()
        }
})


    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Q3</title>
        <meta charset="utf-8">
        <script src="../jspsych.js"></script>
        <script src="../plugins/jspsych-html-button-response.js"></script>
        <script src="../plugins/jspsych-survey-likert-panas.js"></script>
        <script src="../plugins/jspsych-survey-likert.js"></script>
        <script src="../plugins/jspsych-html-keyboard-response.js"></script>
        <script src="../plugins/jspsych-instructions.js"></script>
        <script src="../plugins/jspsych-survey-text.js"></script>
        <script src="../plugins/jspsych-survey-multi-choice.js"></script>
        <link rel="stylesheet" href="../css/jspsych.css">
        <style type="text/css">
            .center {display: block;margin-left: auto;margin-right: auto;width: 50%;}
            .jspsych-btn{margin-top: 50px; margin-bottom: 20px;padding-top: 10px; padding-bottom: 10px; padding-right: 20px;padding-left: 20px;}
            .jspsych-btn{background-color: chartreuse;}
            .jspsych-survey-likert-opts li input[type="radio"]{height: 20px; width: 20px; margin-bottom: 1em; margin-left: -15px !important;}
    	    .jspsych-survey-likert-opts::before{top: 20px !important;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form p{text-align:center;}
            .jspsych-content{width: 100%;}
    	    .jspsych-content-wrapper #jspsych-survey-likert-form .jspsych-survey-likert-statement p{font-size: 150%;margin:0px}
                span.required {display: none;}
            input[type='radio'] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 100%;
            width: 20px;height: 20px;border: 2px solid rgb(12, 12, 12);transition: 0.2s all linear;margin-right: 5px;position: relative; background-color:white}
            input:checked {border: 8px solid black;outline: unset !important;}
        </style>
    </head>
    <body> <!--.jspsych-btn .jspsych-survey-text #jspsych-survey-text-next {margin-top: 20px; margin-bottom: 20px; margin-left: 20px;}-->
        </body>
    <script>
        var timeline = [];
        
        var consent_3 = {
            type: 'html-button-response',
            stimulus: '<p style="font-weight: bold; font-size: 20px">Instruction after the third game</p>'+
                      '<p style="font-weight: bold; font-size: 20px">Instruction to fill the scale for third game</p>',
            choices: ['<b>NEXT</b>'],
            margin_vertical: '0px',
            on_finish: function (data) {
                var button_pressed = JSON.parse(data.button_pressed);
            },
        };
        timeline.push(consent_3)
        
        var scale = ['Irrelevant', 'relevant'];


        var likert_game_3 = {
            type: 'survey-likert',
            questions: [
                {prompt: "<p style='font-size:18px;'><b><i>user friendly gameplay</i></b></p>", name: 'score_usability', labels: scale, required: true },
              ],
            post_trial_gap: 500,
            scale_width: 800,
            button_label:"next",
            on_finish: function (data) {
                var responses = JSON.parse(data.responses);
                responses.score_usability = responses.score_usability + 1;
                data.responses = JSON.stringify(responses);
            }
        };
        timeline.push(likert_game_1)
        
    var surve_3 = {
        type:'survey-text',
        questions: [{prompt:'Fill the blank for game improvement', placeholder:'Write here', rows:10, columns:80}],
        button_label: "Next"
    };
    timeline.push(surve_1)
        
    var end_game = {
        type: 'html-keyboard-response',
        stimulus: '<p style="font-weight: bold; font-size: 20px">End of study</p>',
        choices: jsPsych.NO_KEYS,
        trial_duration: 7000
    };
    timeline.push(end_game)

    
    function saveData() {
    var xhr = new XMLHttpRequest();
    var urlvar = jsPsych.data.urlVariables();
    var link = "core/write_data.php?database=" + urlvar.database;
    xhr.open("POST", link); // change 'write_data.php' to point to php script.
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function () {
        if (xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response.success);
        }
    };
    xhr.send(jsPsych.data.get().json());
}
    
    jsPsych.init({
    timeline: timeline,
    on_finish: function () {
        var user_responden_3 = jsPsych.data.get().first(1).values()[0].button_pressed;
        var user_responden_3 = JSON.parse(user_responden_3);
        jsPsych.data.get().addToAll({ responden_id: Math.floor((Math.random()*10000) + 1) + user_responden_3.Nama});
        saveData()
        }
})


    </script>
</html>

There is a 4 html code with each file has input data to phpmyadmins, I dont know maybe this is the problem. All the html code are embeded in game and playing as one single shot. I am using one database for the jspsych plugins and one database for construct game. I suspicius in process data being collected, I try to gave different name like user_responden, user_responden_1, user_responden_2 and user_responden_3 but no luck.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Data saving my sql #3007

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Data saving my sql #3007

Uh oh!

Nega100 Apr 13, 2023

Replies: 1 comment · 1 reply

Uh oh!

jodeleeuw Apr 14, 2023 Maintainer

Uh oh!

Nega100 Apr 14, 2023 Author

Nega100
Apr 13, 2023

Replies: 1 comment 1 reply

jodeleeuw
Apr 14, 2023
Maintainer

Nega100 Apr 14, 2023
Author