Question conntroller answering with number keys

[danilchr1]

I am currently making an experiment using the Question Controller where participant select on out of two or three answers. I want people to answer when the answers are presented in random order with the leftmost presented answer (regardless of whether it is “кон”,”коне”, or “коня” since they apear in random order) being referred with key 1 on the keyboard, the second leftmost presented answer, being referred with key 2 on the keyboard, and the third leftmost presented answer being refered with key 3 on the keyboard. However, the following command from first demontration question does not seem to work.

newController("Question", {q: Question_asked, as: ["кон","коне","коня"],randomOrder:["1","2","3"],presentHorizontally:true, hasCorrect: parseInt("2")})
    .css("width","40em")
    .css("line-height","1.4")
    //.css("padding-top","40px")
    .css("padding-bottom","20px")
            .center()
            .print()
            .log()
            .wait()
            .remove()

I seem to be having succes if the answers are coded with letter keys:

newController("Question", {q: Question_asked, as: ["кон","коне","коня"],randomOrder:["V","B","N"],presentHorizontally:true, hasCorrect: parseInt("2")})
    .css("width","40em")
    .css("line-height","1.4")
    //.css("padding-top","40px")
    .css("padding-bottom","20px")
            .center()
            .print()
            .log()

            .wait()
            .remove()

Also it might be could disable mouse clicking (ideally without changing the controller) so that participants always answer in the same way (with the keyboard) which will minimise variation.

Link https://farm.pcibex.net/experiments/JshjcA/edit

Danil

[Jeremy]

Hi Danil,

This is an issue with the native-Ibex Question controller. Here’s a workaround:

Add a file named global_z.css to your project’s Aesthetics folder:

.PennController-myController.Question-Question ol {
    list-style: none;
    display: flex;
}
.PennController-myController.Question-Question li {
    min-width: 5em;
    pointer-events: none;
}

Then you can use this in your script:

newController("myController", "Question", {
    q: Question_asked,
    as: ["кон","коне","коня"],
    randomOrder: true,
    hasCorrect: 2
})
    .center()
    .print()
    .log()
    .wait()
    .remove()

Replace myController both in the css file and in your script if you want to use a different name

Jeremy

[danilchr1]

Just to be sure, if I use this solution will the participant be able to use the number keys (1,2,3) for answering and does this disable the option for choosig the answers with the mouse?

[Jeremy]

I tested the code, and you can try it out too, and I was only able to make a selection using the keys 1, 2 and 3. The CSS rule pointer-events: none; on the li elements disables mouse clicks

Jeremy

[danilchr1]

Hello,
Thank you for your solution. It worked. But I also did some changes in the original Qustion.css file changing the font in paricular in the li.scale-box section:

  margin-right: 1em;
    */
    margin-right: 2em;
    /*

    /*
    border: 1px #9ea4b1 solid;
    */
    border: 1px #9ea4b1 none;

    font-size: 18pt;

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Original Question.css file:

.Question {
    margin-left: 0;
    padding-left: 0;
}
.instructions-text {
    font-style: italic;
    clear: left;
    padding-top: 1em;
    font-size: small;
}
li.normal-answer {
    text-align: left;
    cursor: pointer;
    padding-bottom: 1em;
}
li:hover.normal-answer {
    cursor: pointer;
}
li.scale-box {
    float: left;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    margin-right: 1em;
    padding-right: 0;
    border: 1px #9ea4b1 solid;
    width: 2em;
    height: 2em;
    padding-top: 0.5em;
    text-align: center;
}
.scale-comment-box {
    float: left;
    list-style: none;
    margin-left: 0em;
    padding-left: 0;
    margin-right: 1em;
    padding-right: 0;
    padding-top: 0.5em;
    text-align: center;
    font-style: italic;
}
li.scale-box a {
    text-decoration: none; 
    display: block;
    vertical-align: middle;
}
li.scale-box a:hover {
    text-decoration: none;
    display: block;
    vertical-align: middle;
}
span.fake-link {
    color: blue;
    cursor: pointer;
}
span:hover.fake-link {
    cursor: pointer;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
New Question.css file:

.Question {
    margin-left: 0;
    padding-left: 0;
}
.instructions-text {
    font-style: italic;
    clear: left;
    padding-top: 1em;
    font-size: small;
}
li.normal-answer {
    text-align: left;
    cursor: pointer;
    padding-bottom: 1em;
}
li:hover.normal-answer {
    cursor: pointer;
}
li.scale-box {
    float: left;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    /*
    margin-right: 1em;
    */
    margin-right: 2em;
    padding-right: 0;
    /*
    border: 1px #9ea4b1 solid;
    */
    border: 1px #9ea4b1 none;
    width: 4em;
    height: 2em;
    padding-top: 0.5em;
    text-align: center;
    font-size: 18pt;
}
.scale-comment-box {
    float: left;
    list-style: none;
    margin-left: 0em;
    padding-left: 0;
    margin-right: 1em;
    padding-right: 0;
    padding-top: 0.5em;
    text-align: center;
    font-style: italic;
}
li.scale-box a {
    text-decoration: none; 
    display: block;
    vertical-align: middle;
}
li.scale-box a:hover {
    text-decoration: none;
    display: block;
    vertical-align: middle;
}
span.fake-link {
    color: blue;
    cursor: pointer;
}
span:hover.fake-link {
    cursor: pointer;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
When I create the global_z.css file it does not recognise some of these changes. There is no border around the answers as expected by the newly specified line:

border: 1px #9ea4b1 none;

but the answers have the same font size as the original not the newly specified font-size: 18pt;

(the font-size parameter did not exist in the original Question.css file, but it seems to work correctly as long as the global_z.css file is not uses)

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
global_z.css file

.PennController-myController.Question-Question ol {
    list-style: none;
    display: flex;
}
.PennController-myController.Question-Question li {
    min-width: 5em;
    pointer-events: none;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

How can I resolve this, so that these changes are recognised?

Should I keep the original Question.css file, edit the Question.css file or the global_z.css file.

Danil

• This reply was modified 2 years ago by Jeremy.

[Jeremy]

Hi Danil,

The li elements don’t get the scale-box class when you do not set presentAsScale to true in the Question controller (and in my experience, setting it to true prevents keypresses on 1/2/3)

However, they get the normal-answer class, so you could either add the rule font-size: 18pt; to li.normal-answer { in Question.css, or you could add it to .PennController-myController.Question-Question li { in global_z.css

Jeremy

[danilchr1]

Hello, thank you for your answer. The solution worked.
Now I have a new issue. While I was doing the testing, some words in the answer in the Question controller (usually longer words) appeared very close to one another and they seemed like one very long word. How can I solve this problem? My Question.css file and my global_z.css file now look like this:

Question.css:

.Question {
    margin-left: 0;
    padding-left: 0;
}
.instructions-text {
    font-style: italic;
    clear: left;
    padding-top: 1em;
    font-size: small;
}
li.normal-answer {
    text-align: left;
    cursor: pointer;
    padding-bottom: 1em;
}
li:hover.normal-answer {
    cursor: pointer;
}
li.scale-box {
    float: left;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    /*
    margin-right: 1em;
    */
    margin-right: 2em;
    padding-right: 0;
    /*
    border: 1px #9ea4b1 solid;
    */
    border: 1px #9ea4b1 none;
    width: 4em;
    height: 2em;
    padding-top: 0.5em;
    text-align: center;
    font-size: 18pt;
}
.scale-comment-box {
    float: left;
    list-style: none;
    margin-left: 0em;
    padding-left: 0;
    margin-right: 1em;
    padding-right: 0;
    padding-top: 0.5em;
    text-align: center;
    font-style: italic;
}
li.scale-box a {
    text-decoration: none; 
    display: block;
    vertical-align: middle;
}
li.scale-box a:hover {
    text-decoration: none;
    display: block;
    vertical-align: middle;
}
span.fake-link {
    color: blue;
    cursor: pointer;
}
span:hover.fake-link {
    cursor: pointer;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxx
global_z.css

.PennController-myController.Question-Question ol {
    list-style: none;
    display: flex;
}
.PennController-myController.Question-Question li {
    min-width: 5em;
    pointer-events: none;
    font-size: 18pt;
}

Here is the link which is implemented in a local ibexfarm of the University of Nova Gorica.

https://ibexfarm.ung.si/manage/experiment6_test_final5#highlighted

Danil

[danilchr1]

Sorry,
I attached the wrong link to the experiment

https://ibexfarm.ung.si/ibexexps/dk0035/experiment6_test_final6/experiment.html

Danil

[Jeremy]

Hi,

Either increase min-width, or add horizontal margins to the li elements, eg margin: 0em 1em;

Jeremy

[danilchr1]

Thank you. Now it seems to be fine.
Danil

[Author]

Posts