Display issues, overlapping text and textinput

PennController for IBEX Forums Support Display issues, overlapping text and textinput

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #9931
    elericha
    Participant

    Hello!

    in case you have a chance to look at it, we would be very glad to get some help with the following problems:

    In our online experiment we built a questionnaire in the end. Some people who tested the whole experiment had displaying issues, as some text and textinput or dropdown menus were overlapping. I built the questionnaire with text and textinput or dropdowns that I printed on a canvas. On the canvas I define exactly where those elements are printed, so why do some people see it differently?

    Here are parts of the code, where the problem occurred: (Trial: “Meta-2”)

    newText ("AlterDeutsch", "In welchem Alter hast du angefangen, Deutsch zu lernen?")
               .settings.css("font-size", "18px")
               .settings.bold()
              ,
           newText ("errorAlter", "Bitte ausfüllen")
           .settings.css ("font-size", "14px")
           .color ("red")
           .settings.hidden()
       ,
              newTextInput ("AlterDeutschIn")
              .size (200,20)
              .log()
              ,
               
           newCanvas("SprachenA", 1000, 40)
           .settings.add (150,0, getText ("AlterDeutsch"))
           .settings.add (670,0, getTextInput ("AlterDeutschIn"))
           .settings.add (890,0, getText ("errorAlter"))
           .color ("white")
           .print()
           .center(),

    Also, one person said that the text in general was super huge and cut off at the right side. However, I used font-size 18px for most text elements which is not supposed to be that huge.

    Do you have any idea how I could solve these problems in order to avoid actual experiment subjects to have any of those issues? Another person I asked said, it could be because of some css styles but we could not figure it out.

    This was the first time I built something with PCIbex and I don’t have any further programming skills. We used another experiment design and changed it, here you can find the link to the whole thing: https://github.com/elericha/Open-Guise.git

    Thank you so much!
    Amelie

    #9933
    Jeremy
    Keymaster

    Hi Amelie,

    You place your TextInput element named AlterDeutschIn 520px to the right of your Text element named AlterDeutsch, but because the latter is over 520px wide, the former ends up appearing on top of the latter’s last words

    I think what you want is to have all three elements (Text, TextInput, Text) belong to same line flow, in a way that if there’s not enough width to print everything on a single line, a second line will be inserted and as much as possible of the remaining content will be placed on that second line, and so on. To do that, all the corresponding HTML elements need to be inline elements inside a span element. You’ll need to use Javascript to move the HTML elements corresponding to the PennController elements appropriately:

    // include placeholder span elements inside the Text element (which is itself a span)
    newText("AlterDeutsch", "In welchem Alter hast du angefangen, Deutsch zu lernen? <span id='ipt'></span><span id='err'></span>")
        .center()
        .css("font-size", "18px")
        .size(1000,60)
        .bold()
        .print()
    ,
    // add the TextInput to the page but don't show it just yet
    newTextInput("AlterDeutschIn")
        .hidden()
        .size (200,20)
        .log()
        .print()
    ,
    // add the error Text element to the page but don't show it just yet
    newText("errorAlter","Bitte ausfüllen")
        .color("red")
        .css("font-size","14px")
        .hidden()
        .print()
    ,
    // use a javascript function to replace the placeholder elements with the TextInput and the error Text elements
    newFunction( ()=>{
        document.querySelector("#ipt").replaceWith(document.querySelector("textarea.PennController-AlterDeutschIn"));
        document.querySelector("#err").replaceWith(document.querySelector("span.PennController-errorAlter"));
    } ).call()
    ,
    // reveal the TextInput element now that it's at the right location
    getTextInput("AlterDeutschIn").visible()

    Jeremy

    #9936
    elericha
    Participant

    Thank you so much! I think this might work 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.