Embedded HTML consent form

Builder
1

Hi there,

I’ve been passed some embedded HTML code which I can see is working in another experiment and enables me to show a consent form. I’ve set up a routine the same way as in the experiment where it is working, created my HTML form but for some reason the routine is being skipped over completely. Currently here is the code I have, which sits below a text component ‘loading_IC’.

BEGIN ROUTINE TAB

// This routine should not start straight away or the screen width and height
// may be incorrect.

expInfo[‘xRes’] = screen.width;
expInfo[‘yRes’] = screen.height;
console.log(“screen xRes”,expInfo[‘xRes’]);
console.log(“screen yRes”,expInfo[‘yRes’]);

//let src = (‘demographics.html?xRes=’+expInfo[‘xRes’]+‘&yRes=’+expInfo[‘yRes’]);
let src = ‘consent_cp.html’;

params = {}; // Results added here after form is submitted
continue_routine = true; // Routines can’t be ended from within Begin Routine
$(document).ready(function() {
// Add custom contents from html file using an iframe:
$(‘body’).append(‘

’);

$(‘#iframe’).on(‘load’,function(iframe){
// Auto-adjust iframe size:
$(this).contents().find(‘html’).css({ ‘display’: ‘table’, ‘width’: ‘100%’, ‘overflow-x’: ‘hidden’ });
$(‘#iframe-o’).height($(window).height()-20, true);
$(‘#iframe-m’).width($(this).contents().find(‘html’).width()+100);
$(‘#iframe-i’).height(Math.max($(this).contents().find(‘html’).height()+20, $(window).height()-20), true);
$(this).height($(this).contents().find(‘html’).height());
$(‘#iframe-o’).css(‘visibility’,‘visible’);

// If iframe contains a form with exactly 7 params, then show the submit button and capture its output:
$(this).contents().find('form').on('submit',function(e){
  e.preventDefault();
  var params = {};
  var numParams = $(this).serializeArray().length;
  if (numParams == 7) {
    $.each($(this).serializeArray(),function(i, param){
      params[param.name] = param.value;
      psychoJS.experiment.addData(param.name, param.value);
    });
    console.log ( 'DEBUG:FRM', params );
    // Remove iframe and continue to next routine when done:
    $('#iframe-o').remove();
    continue_routine = false;
  } else {
    alert('Please fill in all questions. If you do not wish to continue, close the experiment.');
  }
});

});
});

//$(‘#iframe’).attr( ‘src’, function(i,val){ return val;} );

EACH FRAME TAB

continueRoutine = continue_routine;

END ROUTINE TAB

// expInfo variables appear on every line in the data file
// after they are created.
expInfo[‘IC1’] = psychoJS.experiment._currentTrialData[‘Q1’];
expInfo[‘IC2’] = psychoJS.experiment._currentTrialData[‘Q2’];
expInfo[‘IC3’] = psychoJS.experiment._currentTrialData[‘Q3’];
expInfo[‘IC4’] = psychoJS.experiment._currentTrialData[‘Q4’];
expInfo[‘IC5’] = psychoJS.experiment._currentTrialData[‘Q5’];
expInfo[‘IC6’] = psychoJS.experiment._currentTrialData[‘Q6’];
expInfo[‘IC7’] = psychoJS.experiment._currentTrialData[‘Q7’];

//Shut down if participant says ‘No’.

if (expInfo[‘IC1’] === ‘2’ || expInfo[‘IC2’] === ‘2’ || expInfo[‘IC3’] === ‘2’ || expInfo[‘IC4’] === ‘2’ || expInfo[‘IC5’] === ‘2’ || expInfo[‘IC6’] === ‘2’|| expInfo[‘IC7’] === ‘2’) {
alert(‘As you did not consent to taking part, the experiment will now shut down.’);
psychoJS.experiment.experimentEnded = true;
}

Grateful for any thoughts as to why the routine is skipped over. I’ve checked the code against the one I can see is working, I’ve checked that the html file is in the same folder as the experiment file and that it’s titled correctly. I’ve also tested putting a text box in the routine to flash up the word ‘test’ just to make sure that the routine could be found when the experiement ran.

Thanks

2

Are you running this locally? This JS code only works online.