0

I developed an experiment in JavaScript that I would like to run on my localhost. In the bold line I tried to send an HTML file that contains the experiment (this HTML file is working well, when I double-click it, a browser that contains my experiment is open and the experiment is running). I also tried to sendFile a js file that contains my experiment but when i enter my localhost I can see only the code, but the code is not running. I'm using nodemon and the library jspsych.

 //jshing esversion:6 const express = require("express"); const bodyParser = require("body-parser"); const app = express(); // app.use([ // express.static(__dirname + '/index.html'), // ]); // app.use('/', function (req, res) { // res.set("content-type", "text/html"); // res.sendFile(__dirname + '/index.html'); // }); app.get("/", function(req, res){ res.set("content-type", "text/html"); res.sendFile(__dirname + "/index.html"); }) app.listen(3000, function(){ console.log("server started on port 3000"); })

my index.html: (I know i'm not supposed to write my 'logic' part inside the html but I needed to make is as simple and fast as I can, at least for POC).

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <script src="jsfiles/jspsych.js" type="text/javascript"></script> <script src="jsfiles/plugins/jspsych-html-keyboard-response.js" type="text/javascript"></script> <script src="jsfiles/plugins/jspsych-image-keyboard-response.js" type="text/html"></script> <link href="jsfiles/css/jspsych.css" rel="stylesheet" type="text/css"> --> <script src="jsfiles/jspsych.js" type="text/javascript"></script> <script src="jsfiles/plugins/jspsych-html-keyboard-response.js" type="text/javascript"></script> <script src="jsfiles/plugins/jspsych-image-keyboard-response.js" type="text/html"></script> <link href="public/css/jspsych.css" rel="stylesheet" type="text/css"> <title>Niv2</title> </head> <body style="background-color: rgb(154, 233, 253);"> <script> var random_indexes = []; //this array will be incahrge of the order of the trials display for(var i=0; i<30;i++){ //initialize aray of indexes random_indexes[i] = i; } random_indexes.sort(() => Math.random() - 0.5); //randomize the indexes array var blue_prices = [0.9, 0.4, 0.5, 0.3, 0.8, 0.6, 0.5, 0.7, 0.2, 0.7, 0.4, 0.5, 0.7, 0.3, 0.9, 0.6, 0.1, 0.4, 0.8, 0.2, 0.1, 0.6, 0.3, 0.5, 0.2, 0.4, 0.8, 0.2, 0.1, 0.3]; var red_prices = [0.8, 0.2, 0.4, 0.1, 0.6, 0.3, 0.3, 0.5, 0.1, 0.6, 0.4, 0.5, 0.7, 0.3, 0.9, 0.6, 0.1, 0.4, 0.8, 0.2, 0.2, 0.9, 0.7, 0.6, 0.3, 0.7, 0.9, 0.5, 0.4, 0.4]; var blue_result = []; var red_result = []; var j; for(j=0;j<30;j++){ //fillig the array of pictures (nedd to fill it without looping) if(j%2==0){ blue_result[j] = "public/pics/blue1.png>"; red_result[j] = "public/pics/red1.png>"; } else{ blue_result[j] = "public/pics/blue2.png>"; red_result[j] = "public/pics/red2.png>"; } } var curr_trial; var runner = 0; //inside the on_finish function, i is not recognized so i have to use runner instead! var timeLine = []; landing_page = { type: "html-keyboard-response", stimulus: "<div style='text-align:center; font-size: 1.5rem;'>" + "<img src='public/pics/bgu-logo.png' style='max-width:20%;'></img>"+ "<h3>Study Title: Card selection task</h3>"+ "<p class='my_italic_p'>Please read this consent form carefully before deciding whether you would like to participate in this study.</p>"+ "</div>"+ "<div class='my_div'>"+ "<h5 class='my_header'>Purpose of the Study:</h5>"+ "<p class='my_small_p'>Which factors influence how people explore their environment and manifest their preferences towards different stimuli? We hope to learn how quickly<br>and accurately people learn contingencies and how do they affect subsequent decisions.</p>"+ "<h5 class='my_header'>What you will do in this study:</h5>"+ "<p class='my_small_p'>You will indicate your preferences towards two presented decks of cards differing in the amount of their associated value and information.<br>You will make responses using a device of your choosing. You will also indicate your comprehension of the task and fill out a few additional questionnaires. </p>"+ "<h5 class='my_header'>Time Required:</h5>"+ "<p class='my_small_p'> The study will take approximately 15 minutes to complete.</p>"+ "<h5 class='my_header'>Risks:</h5>"+ "<p class='my_small_p'>There are no anticipated risks associated with being in this study.</p>"+ "<h5 class='my_header'>Benefits:</h5>"+ "<p class='my_small_p'> At the end of the study, we will provide a thorough explanation of the study and of our hypotheses. There are no foreseeable individual benefits to you as a participant.</p>"+ "<h5 class='my_header'>Compensation:</h5>"+ "<p class='my_small_p'> You will receive the amount of pay specified on the sign-up page. Full payment will be given upon indication of successful task completion.</p>"+ "<h5 class='my_header'>Confidentiality:</h5>"+ "<p class='my_small_p'>Your participation in this study will remain confidential. Your responses will be assigned a code number, and the list connecting your identity with this number will be kept on a password-protected computer in a locked room, separate from the rest of your data. After the completion of data collection we will destroy the code linking your identity to your data.<br>De-identified data will be kept indefinitely and shared publicly for research purposes, but no identifying information will be shared. Identifiable details, including names, will be retained for 7 years and will be destroyed afterwards, as required by regulations.</p>"+ "<h5 class='my_header'>Participation and withdrawal:</h5>"+ "<p class='my_small_p'>Your participation in this study is completely voluntary. You may skip any questions/tasks you do not want to complete. You may withdraw at any time without penalty or loss of benefit to which you are otherwise entitled by simply closing the browser window or tab in which you are taking the survey. We encourage you to save this and the following screens via printing or a screenshot to retain our contact information and/or the questions asked..</p>"+ "</div>"+ "<p>Press 'y' to continue or 'n' to exit.</p>", post_trial_gap: 500, choices: ['y', 'n'], on_finish: function(data){ data.location = runner; //check if neeeded if(data.key_press == 89 || data.key_press == 121){ data.displayNext = "<h1 style='color:green;'>The experiment will begin shortly</h1>"; // can add property correct by modify data object directly } else if(data.key_press == 78 || data.key_press == 110) { data.displayNext = "<h1 style='color:red;'>You decided NOT to participate in the expiriment</h1>"; } } }; timeLine.push(landing_page); jsPsych.data.addProperties({displayNext: 'none'}); jsPsych.data.addProperties({location: 1}); jsPsych.data.addProperties({startingTime: 0}); jsPsych.data.addProperties({selction: 'none'}); var Total_Payment = 0; for(var i=0;i<30;i++){ var start_time = Date.now(); curr_trial = { type: "html-keyboard-response", stimulus: "<div style='text-align:center; font-size: 1.5rem;'> <p>בניסוי זה יופיעו מולך 2 קלפים, בכל שלב עליך לבחור בקלף</p>"+ "<p>לכל קלף יש את השווי שלו</p>" + "<p>הסכום שתבחר בכל שלב יצטבר לכדי סכום כולל שאותו תקבל בסוף הניסוי.</p>" + "<div style='width: 700px; padding-left:8%;'>"+ "<div style='float: left;'><img src='public/pics/blue_card.png'></img>" + "<p class='small'> <p>for blue card: " + blue_prices[random_indexes[i]] + "</p> <strong>Press the 1 key</strong></p></div>" + "<div class='float: right;'><img src='public/pics/red_card.png'></img>" + "<p class='small'> <p>for red card: "+ red_prices[random_indexes[i]] +"</p> <strong>Press the 2 key</strong></p></div> </div>" + "</div>", post_trial_gap: 500, choices: ['1', '2'], on_finish: function(data){ // alert(startingTime); var timming = (Date.now() - data.startingTime - start_time) / 1000; //time this trial took in seconds! alert(timming); data.location = runner; if(data.key_press == 49){ //jsPsych.data.addProperties({displayNext: "<img src =" + blue_result[data.location%30]+ " </img>"}); data.displayNext = "<img src=" + blue_result[random_indexes[runner]] + " </img> <p>Press any key to continue</p>"; data.selction = 'blue'; Total_Payment += blue_prices[random_indexes[runner]]; } else if(data.key_press == 50) { data.displayNext = "<img src=" + red_result[random_indexes[runner]] + " </img> <p>Press any key to continue</p>"; data.selction = 'red'; Total_Payment += red_prices[random_indexes[runner]]; } runner = runner + 1; } }; timeLine.push(curr_trial); var curr_result = { type: 'html-keyboard-response', stimulus: function(){ return jsPsych.data.get().last(1).values()[0].displayNext; } }; timeLine.push(curr_result); } jsPsych.init({ timeline: timeLine, on_data_update: function(data){data.startingTime = Date.now();}, on_finish: function(){ jsPsych.data.displayData();} }); </script> </body> </html>
Improve this question
4
  • Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output using the [<>] snippet editor. Commented Aug 10, 2020 at 9:21
  • Post your code too Commented Aug 10, 2020 at 9:24
  • 1
    I searched for a related topics but I couldn't find one that really solving my problem, and I posted the relevant code. Commented Aug 10, 2020 at 9:33
  • try to send HTML file from your server. app.use('/', function (req, res) { res.sendFile('YOUR HTML FILE.html'); }); Commented Aug 10, 2020 at 9:57

2 Answers 2

Reset to default
1

You say "In the bold line I tried to send an HTML file that contains the experiment (this HTML file is working well, when I double-click it, a browser that contains my experiment is open and the experiment is running)."

Yet the bold line in your code is

res.sendFile(__dirname + "/exp.js")

Which appears to be sending a JS file only? You probably want to serve a file with a .html extension as the index, as well as including other JavaScript files along side it

Try looking up how to make a static web server with express

Improve this answer
Sign up to request clarification or add additional context in comments.

11 Comments

what I meant was that in the bold line instead of sending "exp.js" I sent "index.html" and index.html contains in its body script tag that contains my experiment. if I double-click on index.html a browser that running my experiment is open.
@achikam did you set the mime type to "text/html" on the server side?
I currently trying to run this on my localhost, is there any changes that I need to do? if so where can I change them exactly? (I saw references to changing/adding MIME type on real servers, not localhosts) @bluejayke
@achikam use res.set("content-type", "text/html") before res.sendFile (reference stackoverflow.com/a/23759686/2016831) if you want to do it for most extensions, copy the JSON here stackoverflow.com/a/61405385/2016831
still getting the same result, localhost is containing an empty html file (with the body-color that i set in the html file), the experiment is not running.
|
1

try to send .html file from your server and tell your server from where he will get the static files to read...

app.use([ express.static(__dirname + '/dist'), ]); app.use('/', function (req, res) { res.sendFile('YOUR HTML FILE.html'); });
Improve this answer

2 Comments

sounds good, never tried to send this that way. hope it will work
I tried to write your code (and obviously modify it to my html file name) on several places such as inside my function app.get or deleting this function and write your code in the same place, and I still get the same outcome, when I enter localhost:3000 I can see an empty page with my html-body color that I set in the html code. (can't see the actual page that I see when I double-click on "index.html")

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.