Question conntroller answering with number keys

PennController for IBEX Forums Support Question conntroller answering with number keys

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #8057
    danilchr1
    Participant

    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

    #8061
    Jeremy
    Keymaster

    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

    #8063
    danilchr1
    Participant

    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?

    #8064
    Jeremy
    Keymaster

    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

    #8068
    danilchr1
    Participant

    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, 2 months ago by Jeremy.
    #8074
    Jeremy
    Keymaster

    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

    #8089
    danilchr1
    Participant

    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

    #8090
    danilchr1
    Participant

    Sorry,
    I attached the wrong link to the experiment

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

    Danil

    #8091
    Jeremy
    Keymaster

    Hi,

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

    Jeremy

    #8097
    danilchr1
    Participant

    Thank you. Now it seems to be fine.
    Danil

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