OpenSesame
Rapunzel Code Editor
DataMatrix
Support forum
Python Tutorials
MindProbe
OpenSesame videos
Python videos
Supported by

Benutzerdefinierte HTML-Formulare

Das inline_html-Element ermöglicht es Ihnen, Formulare mit benutzerdefiniertem HTML zu erstellen.

  • Das name-Attribut von input-Tags entspricht einer experimentellen Variable. Daher wird der in das Texteingabefeld von Beispiel 1 eingegebene Text als experimentelle Variable text_response gespeichert.
  • Für checkbox- und radio-Elemente können Sie das id-Attribut verwenden, um einem bestimmten Wert die zugehörige experimentelle Variable zuzuweisen.
  • Sie können das required-Attribut verwenden, um anzuzeigen, dass ein Formular nicht abgeschickt werden kann, bevor ein Feld ausgefüllt wurde.
  • Das Formular wird geschlossen, wenn der Teilnehmer auf eine Eingabe des Typs submit klickt.
  • Um Bilder aus dem Datei-Pool in ein benutzerdefiniertes HTML-Formular einzufügen, rufen Sie zunächst die URL zur Datei ab, weisen Sie sie einer experimentellen Variable zu und verwenden Sie dann diese Variable als Quelle für das <img>-Tag (siehe Beispiel 3).

Beispiel 1:

Ein sehr einfaches Texteingabeformular:

<input type='text' name='text_response'>
<input type='submit' value='hier klicken zum Weitermachen'>

Beispiel 2:

Ein Formular mit mehreren Radiobuttons:

<p>Bitte wählen Sie Ihr Alter:</p>
<input type="radio" id="age1" name="age" value="30" required>
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>  
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Absenden">

Beispiel 3:

Sie können Variablenreferenzen verwenden (außer innerhalb von <script>-Tags, in denen geschweifte Klammern einfach als Teil des JavaScript-Codes interpretiert werden):

<p>Ihre Altersgruppe ist {age}</p>
<input type='submit' value='ok'>

Beispiel 4:

Sie können JavaScript über <script>-Tags verwenden. Zum Beispiel können Sie ein Bild aus dem Datei-Pool erhalten und es einem anfangs leeren <img>-Tag wie folgt zuweisen:

<img id='capybara'>
<input type='submit' value='ok'>

<script>
document.getElementById('capybara').src = pool['capybara.png'].data.src
</script>
Supported by