jsPsych buttons acting very weird #3362

moosakhan2 · 2024-07-28T19:23:38Z

moosakhan2
Jul 28, 2024

Hiya everyone! I am creating some jspsych experiments with some buttons and whenever I click slightly around the button, there is either some error, or the button works. I have tried it with multiple scenarios in my code but I don't know....maybe it is just a jspsych issue. For context, I have also added an event listener to the button id but I don't think that is an issue. The button should work when I click ON it, not around it.

<!DOCTYPE html>
<html>
<head>
  <title>Language Gender Experiment</title>
  <script src="https://unpkg.com/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <script src="https://unpkg.com/@jspsych/[email protected]"></script>
  <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />

  <style>
    .start-para {
      display: block;
      align-self: center;
      align-items: center;
      width: 50%;
      margin-left: 25%;
    }

    .start-button{
      width:5.75rem;
      margin: none;
      background-color: black;
      color: white;
    
    }

    .start-button:hover{
      background-color: white;
      color: black;
      border-color: black;

  
    }


  </style>
</head>

<body></body>

<script>
  var jsPsych = initJsPsych({
    show_progress_bar: true, // Enable progress bar
    auto_update_progress_bar: true, // Automatically update progress bar
  });

  /* create timeline */
  var timeline = [];

  /* preload images */
  var preload = {
    type: jsPsychPreload,
    images: [
      'img/table.jpg', 'img/cruise-ship.png', 'img/sun.jpg', 'img/moon.jpg',
      'img/bridge.webp', 'img/car.jpg', 'img/cat.jpeg', 'img/chair.jpg',
      'img/clock.jpg', 'img/cup.jpg', 'img/dog.jpg', 'img/flower.jpeg',
      'img/house.jpg', 'img/pen.jpg', 'img/tree.jpeg', 'img/window.JPG'
    ]
  };
  timeline.push(preload);

  /* define trial stimuli array for timeline variables */
  var test_stimuli = [
    { stimulus: "img/table.jpg", prompt: 'Table' },
    { stimulus: "img/cruise-ship.png", prompt: 'Cruise Ship' },
    { stimulus: "img/sun.jpg", prompt: 'Sun' },
    { stimulus: "img/moon.jpg", prompt: 'Moon' },
    { stimulus: "img/car.jpg", prompt: 'Car' },
    { stimulus: "img/cat.jpeg", prompt: 'Cat' },
    { stimulus: "img/chair.jpg", prompt: 'Chair' },
    { stimulus: "img/clock.jpg", prompt: 'Clock' },
    { stimulus: "img/cup.jpg", prompt: 'Cup' },
    { stimulus: "img/dog.jpg", prompt: 'Dog' },
    { stimulus: "img/flower.jpeg", prompt: 'Flower' },
    { stimulus: "img/house.jpg", prompt: 'House' },
    { stimulus: "img/pen.jpg", prompt: 'Pen' },
    { stimulus: "img/tree.jpeg", prompt: 'Tree' },
    { stimulus: "img/window.JPG", prompt: 'Window' }
  ];

  var languageGenders = {
    "English": ["Masculine", "Feminine", "Neuter"],
    "French": ["Masculine", "Feminine"],
    "Arabic": ["Masculine", "Feminine"],
    "Urdu": ["Masculine", "Feminine"]
  };

  var languageSelected = "None";

  /* define instructions trial */
  function startMenu() {
    var instructions = {
      type: jsPsychHtmlButtonResponse,
      stimulus: `
        <p class="start-para">In this experiment, you will be shown various objects and asked to select their language gender. Please read the instructions carefully and select the appropriate gender for each object. Thank you for participating!</p>
        <div>
          <select name="languages" class="jspsych-btn" id="languages">
            <option value="English">English</option>
            <option value="French">French</option>
            <option value="Arabic">Arabic</option>
            <option value="Urdu">Urdu</option>
          </select>
        </div>
      `,
      choices: ['Start'],
      button_html: ['<button class="jspsych-btn start-button" id="start-btn">%choice%</button>'],
      on_load: function() {
        document.getElementById('start-btn').addEventListener('click', function() {
          languageSelected = document.getElementById('languages').value;
          document.body.innerHTML = ''; // Clear the instructions from the body
          
          // Create and display the questions
          function CreateAndDisplayQuestion() {
            var viewportHeight = window.innerHeight;
            var height = viewportHeight / 2;
            var languageGenderArray = languageGenders[languageSelected];
            var question = {
              type: jsPsychImageButtonResponse,
              stimulus: jsPsych.timelineVariable('stimulus'),
              stimulus_height: height,
              choices: languageGenderArray.concat([`Don't Know`]),
              prompt: jsPsych.timelineVariable('prompt'),
              button_html: languageGenderArray.concat(['None']).map(choice => `<button class="jspsych-btn">%choice%</button>`),
              data: {
                selected_gender: "Male",
                choices: languageGenderArray.concat(['None'])
              },
              on_finish: function(data) {
                data.selected_gender = data.choices[data.response];
              }
            };

            var question_timeline = {
              timeline: [question],
              timeline_variables: test_stimuli
            };
            timeline.push(question_timeline);
          }

          // Clear timeline and run the experiment
          timeline = [preload];
          CreateAndDisplayQuestion();
           jsPsych = initJsPsych({
            show_progress_bar: true, // Enable progress bar
            auto_update_progress_bar: true, // Automatically update progress bar
            on_finish: function() {
          jsPsych.data.displayData();
    }
  });
          jsPsych.run(timeline);
        });
      }
    };

    jsPsych.run([instructions]);
  }

  startMenu();
</script>

</html>

Shaobin-Jiang · 2024-07-29T11:53:42Z

Shaobin-Jiang
Jul 29, 2024

First, this is a problem with jsPsych but only present in the older versions of the html-button-response. Clicking within the margin of the buttons would end the trial in the demos provided in v7 but not those in v8. As for your problem, just change the margin of the button to margin: 0 instead of margin: none; the latter has an invalid attribute value.

2 replies

moosakhan2 Jul 30, 2024
Author

But then i cant add general margins to styles for example. Is it possible that I change the class of a stimulus or a prompt in Jspsych?
For example, in the variable which I will push to the timeline, how do I change the styles for the stimulus and the prompt class. (i am having margin issues as things are getting stuck together) and since I set the margin for choices to 0, I can't change that.

            var question = {
              type: jsPsychImageButtonResponse,
              stimulus: jsPsych.timelineVariable('stimulus'),
              stimulus_height: height,
              choices: languageGenderArray.concat([`Don't Know`]),
              prompt: jsPsych.timelineVariable('prompt'),
              button_html: languageGenderArray.concat(['None']).map(choice => `<button class="jspsych-btn choice-button">%choice%</button>`),
              data: {
                selected_gender: "Male",
                choices: languageGenderArray.concat(['None'])
              },

              on_finish: function(data) {
                data.selected_gender = data.choices[data.response];
              }
            };

Shaobin-Jiang Jul 31, 2024

Change the className property of an element in on_load.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jsPsych buttons acting very weird #3362

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

jsPsych buttons acting very weird #3362

moosakhan2 Jul 28, 2024

Replies: 1 comment · 2 replies

Shaobin-Jiang Jul 29, 2024

moosakhan2 Jul 30, 2024 Author

Shaobin-Jiang Jul 31, 2024

moosakhan2
Jul 28, 2024

Replies: 1 comment 2 replies

Shaobin-Jiang
Jul 29, 2024

moosakhan2 Jul 30, 2024
Author