February 15, 2023 at 9:23 am #9931elerichaParticipant
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!
AmelieFebruary 15, 2023 at 2:20 pm #9933JeremyKeymaster
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
JeremyFebruary 17, 2023 at 7:09 am #9936elerichaParticipant
Thank you so much! I think this might work 🙂
- You must be logged in to reply to this topic.