Diagonal scale labels

PennController for IBEX Forums Support Diagonal scale labels

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #7175
    mschrumpf
    Participant

    Hello everyone.
    My experiment incorporates a personality questionnaire. There are a few dozen questions, all to be answered with a five-point Lickert scale ranging from “complete disagreement” to “complete agreement”.
    I would like to put labels on the scale at the very top. I would like those labels to be placed diagonally above each button.

    Here’s a draft of what I’m trying to do. It doesn’t work right now, as the labels go all over the place and overlap with each other:

    
    newTrial ("Fragebogen" ,
        newText("<h2>Fragebogen</h2> \
        <p>Bitte beantworten Sie an dieser Stelle ein paar Fragen zu Ihrer Persönlichkeit.</p> \
        <p>Ich sehe mich selbst als eine Person, die: </p>")
            .center()
            .print()
        ,
        newCanvas("FragebogenCanvas", 600, 500)
            .add( 0, 0, newText("Gray Lines1", " ").settings.cssContainer({
            "width": "520",
            "background-color": "lightgrey",
            "border-radius": "5px",
            "padding": "7px"
            }))
            .add( 0, 80, newText("Gray Lines2", " ").settings.cssContainer({
            "width": "520",
            "background-color": "lightgrey",
            "border-radius": "5px",
            "padding": "7px"
            }))
            .add( 0, 160, newText("Gray Lines3", " ").settings.cssContainer({
            "width": "520",
            "background-color": "lightgrey",
            "border-radius": "5px",
            "padding": "7px"
            }))
            .add( 0, 240, newText("Gray Lines4", " ").settings.cssContainer({
            "width": "520",
            "background-color": "lightgrey",
            "border-radius": "5px",
            "padding": "7px"
            }))
            .add( 420, -70, newText("Starke Ablehnung").settings.css({"width": "80px",
        "float":"left",
        "margin-left": "-22px",
        "transform":"rotate(-50deg)",
    "-webkit-transform":"rotate(-50deg)"/* Opera, Chrome, and Safari */}
    ))
            .add( 440, -70, newText("Ablehnung").left().settings.css({"width": "80px",
        "float":"left",
        "margin-left": "-22px",
        "transform":"rotate(-50deg)",
    "-webkit-transform":"rotate(-50deg)"/* Opera, Chrome, and Safari */}
    ))
            .add( 460, -70, newText("Neutral").left().settings.css({"width": "80px",
        "float":"left",
        "margin-left": "-22px",
        "transform":"rotate(-50deg)",
    "-webkit-transform":"rotate(-50deg)"/* Opera, Chrome, and Safari */}
    ))
            .add( 480, -70, newText("Zustimmung").left().settings.css({"width": "80px",
        "float":"left",
        "margin-left": "-22px",
        "transform":"rotate(-50deg)",
    "-webkit-transform":"rotate(-50deg)"/* Opera, Chrome, and Safari */}
    ))
            .add( 500, -70, newText("Starke Zustimmung").settings.css({"width": "80px",
        "float":"left",
        "margin-left": "-22px",
        "transform":"rotate(-50deg)",
    "-webkit-transform":"rotate(-50deg)"/* Opera, Chrome, and Safari */}
    ))
    
            .add( 10, 0, newText("originell ist und auf neue Ideen kommt."))
            .add( 400, 0, newScale("Antwort1", 5).log())
            .add( 5, 40, newText("geistreich und sehr nachdenklich ist."))
            .add(400, 40, newScale("Antwort2", 5).log())
            .add( 5, 80, newText("Ich bin an vielen verschiedenen Dingen interessiert."))
            .add(400, 80, newScale("Antwort3", 5).log())
            .add( 5, 120, newText("eine aktive Vorstellungskraft hat."))
            .add(400, 120, newScale("Antwort4", 5).log())
            .add( 5, 160, newText("einfallsreich ist."))
            .add(400, 160, newScale("Antwort5", 5).log())
            .add( 5, 200, newText("künstlerische, ästhetische Erlebnisse schätzt"))
            .add(400, 200, newScale("Antwort6", 5).log())
            .add( 5, 240, newText("nicht gerne Routinearbeit verrichtet."))
            .add(400, 240, newScale("Antwort7", 5).log())
            .add( 5, 280, newText("gerne reflektiert und mit Ideen herumspielt."))
            .add(400, 280, newScale("Antwort8", 5).log())
            .add( 5, 320, newText("viele künstlerische Interessen hat."))
            .add( 400, 320, newScale("Antwort9", 5).log())
            .add( 5, 360, newText("erfahren ist in Kunst, Musik oder Literatur."))
            .add( 400, 360, newScale("Antwort10", 5).log())
            .print()
        ,
        newText("Haben Sie privat oder im Beruf mit kreativem Schreiben zu tun? Wenn ja, in welchem Bereich? Z.B. Journalismus, Dichtung, Fanfiction oder dergleichen")
            .center()
            .print()
        ,
        newTextInput("Hintergrund")
            .center()
            .print()
            .log("final")
        ,
        newButton("Weiter")
            .print()
            .wait()
    )
    ;
    

    I already tried a few different things with similar dissatisfactory results. No matter what I do, the labels will not align properly. I assume there is some interference with Penncontroller’s CSS classes, but I cannot figure out exactly where the problem is coming from. I would be very happy about any input on this issue.
    Thanks in advance

    Matthias

    #7176
    Jeremy
    Keymaster

    Hello Matthias,

    Alignment will be easier to handle if you set the first scale’s labels using the .label command and pass it your Text elements: this way, the Text elements will be positioned relative to the radio bullets

    Once you have that, it’s a matter of playing with the CSS rules, in particular transform and transform-origin. Here is a suggestion on how to achieve what you’re after (note that I also added one CSS rule to Aesthetics/global_main.css to add spacing between the scales’ options):

    https://farm.pcibex.net/r/EAIBDr/

    Let me know if you have questions

    Jeremy

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