HTML slider doesn't submit – PennController for IBEX

Tagged: html

This topic has 5 replies, 2 voices, and was last updated 2 years, 7 months ago by Jeremy.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
September 21, 2021 at 11:49 am #7295
slymnymn
Participant
Hi,

For my experiment, I’m constructing a participant background form in a seperate HTML file. Though I have no problem with text input elements where participants can enter their name, age and other things, I can’t see the selected value of slider (aka scale, for self-rated proficiency) in the results file.

Is it the case that PCIBEX is not sensitive to the slider elements in external HTML?

Here is the code for main experiment and html files respectively. For the sake of brevity, I only post the relevant parts of the code :
https://farm.pcibex.net/p/aqLjKD/
```
PennController.ResetPrefix(null)

newTrial("sample",
    newHtml("participantdata", "newfile.html")
        .print()
        .log()
    ,
    newButton("submit","Send")
        .print()
        .wait()
)
```
```
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>participants</title>
  </head>
  <body>
    <h1 style="text-align: center;"><span style="font-family: Times New Roman,Times,serif;"><b

          role="heading">Participant Information Form</b></span><span style="font-family: Times New Roman,Times,serif;"><b

          role="heading"></b></span></h1>
    <p><span style="font-family: Times New Roman;"> Please fill the form below. <br>
      </span></p>
    <p>Name:&nbsp; <input name="name" required="required" type="text">&nbsp;
      Surname: <input name="surname" required="required" type="text"></p>
    <p>Age: <input name="age" required="required" type="text">&nbsp; Email: <input

        name="email" required="required" type="text"></p>
    <p><br>
    </p>
    <p>Your English proficiency</p>
    <input name="proficiency" min="1" max="9" step="1" type="range">
  </body>
</html>
```
- This topic was modified 2 years, 7 months ago by slymnymn.
- This topic was modified 2 years, 7 months ago by slymnymn.
September 21, 2021 at 12:45 pm #7299
Jeremy
Keymaster
Hi,

PennController’s Html element is just a wrapper for Ibex’s Form controller. This controller only detects <input type="text">, <textarea>, <input type="checkbox"> and <input type="radio"> fields (reference)

If you really want to use an HTML input element of type range and have its value recorded, you can do this:
```
<input name="proficiency" min="1" max="9" step="1" type="range" onchange="(function(e){document.querySelector('#pfh').value=e.value;})(this)">
<input name='proficiency_hidden' type='text' id='pfh' style='display:none;'>
```
Jeremy
September 21, 2021 at 3:19 pm #7300
slymnymn
Participant
Thank you Jeremy, this works!

Based on my limited knowledge of HTML, it seems that the code you provided transfers the value from a slider to the text input element, which is invisible and compatible with Pencontroller. Great workaround!
- This reply was modified 2 years, 7 months ago by slymnymn.
September 21, 2021 at 3:42 pm #7302

Jeremy
Keymaster

Correct, this is what my workaround accomplishes

NB: the compatibility has to do with how the Ibex Form controller is written, it’s not a general PennController limitation. For example, the PennController Scale element effectively displays an <input type="range"> element when applied the command slider and logs its value just fine

Jeremy

September 21, 2021 at 3:52 pm #7303

slymnymn
Participant

I noticed something, though. If the participants leave it on the default value (say 5), it doesn’t submit. Possibly due to the event-driven function expressed as “on change=…”.

September 21, 2021 at 4:04 pm #7304

Jeremy
Keymaster

If you know the default value in advance, you can pass it to the hidden input: <input name='proficiency_hidden' type='text' id='pfh' style='display:none;' value='5'>

Jeremy
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.