Sketchpad: sentences going beyond the experiment screen

Comments

• sebastiaan

  June 2023

  Hi @Silk ,

  The lack of automatic line breaks is indeed an annoying limitation of OSWeb, which results from how text is rendered on the OSWeb canvas. What you can do instead is use a form, which is a normal web page that uses normal text rendering, and then programmatically close the form when a key is pressed.

  I'm assuming that you're using OpenSesame 4.0 here, which offers a few convenient improvements over the 3.3.

  • https://osdoc.cogsci.nl/4.0

  First, let's assume that you have a variable called my_text that contains the text that you want to show. You can define this in a loop , or an inline_javascript item like so:

  var my_text = 'some long text'
  

  Then add a form_html that shows this variable as text, has a hidden submit button, and installs a key press listener that programmatically presses this hidden button whenever any key is pressed. (So you don't have to explicitly click on the button.)

  <p>{my_text}</p>
  <input type='submit' value='ok' id='submitButton' hidden>
  <script>
  function keyPressed(e) {
      document.getElementById('submitButton').click()
      window.removeEventListener('keypress', keyPressed)
  }
  window.addEventListener('keypress', keyPressed)
  </script>
  

  It's a bit involved, but it does work. Do you see the logic?

  — Sebastiaan

  
  
  Check out SigmundAI.eu for our OpenSesame AI assistant!
  
• Silk

  June 2023

  Hi @sebastiaan ,

  Thank you very much for the quick answer. Yes I see the logic and it works perfectly. I improved your code a bit so that it can select for specific keys and store them for future uses.

  In the inline_javascript item, I defined a new variable which_key that acts as a placeholder for the key that will be stored later. I also created an array allowed_keys that tells which keys will trigger the click on the hidden button.

  var my_text = "some long text"
  var which_key = "some default key"
  var allowed_keys = ["f","j"]
  

  In the inline_html file I included a conditional statement in the function. It looks into the array and check whether this array includes the pressed key or not. Then, the pressed key is stored in the variable I defined earlier.

  <p>{my_text}</p>
  <input type='submit' value='ok' id='submitButton' hidden>
  
  <script>
  function keyPressed(e) {
      if (allowed_keys.includes(e.key)) {
          which_key = e.key
          document.getElementById('submitButton').click()
          window.removeEventListener('keypress', keyPressed)
      }
  }
  window.addEventListener('keypress', keyPressed)
  </script>
  

  I hope this can help others :)

  Silk--