MaxDiff Mobile Optimisation 8.4.8

Hi,

I'm trying to mobile optimise a max diff (CVC) in Sawtooth version 8.4.8 and the code I've got is currently not working so please can you could point me in a direction of some code that works?

Annoyingly it's now a feature of the new lighthouse, but in the old one (that I need to use for the max diff) it isn't.

Thanks,

Ellie

asked Feb 7, 2018 by e.mason (120 points)

What code were you using? What do you want the code to do?

commented Feb 7, 2018 by Zachary Platinum

(127,375 points)

Hi Zach, I'd like the code to mobile-optimise the max diff.

Currently using this as a code and method but it's not working now for some reason:

1) Go to Survey Settings -> Headers and Footers.
2) Paste the following script under HTML <head> Tag:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <!–[if !IE]> –>
    <link rel=”stylesheet” type=”text/css” href=”[%GraphicsPath()%]your_mobile.css” media=”only screen and (max-device-width: 600px)”>
    <!– <![endif]–>

3) Open a new notepad file and copy and paste the following:
body
    {
    background-color: #FFFFFF; /* Background color */
    color: #222; /* Foreground color used for text */
    font-family: Helvetica;
    font-size: 14px;
    margin: 0; /* Amount of negative space around the outside of the body */
    padding: 0; /* Amount of negative space around the inside of the body */

    }

    .question
    {
    margin-left: 0px;
   margin-right: 0px;
    width: 97%;
    padding: 3px;
    }

    .page
    {
    width: 100%;
    }

    #invisible_submit
    {
    display: none;
    }

    .graphical_next_button, .graphical_previous_button
    {
    width: 100px;
    height: 70px;
    background-color: #666666;
    -moz-border-radius: 15px 15px 15px 15px;
    border-radius: 15px 15px 15px 15px;
    }

    .button_highlight
    {
    background-color: #e2e2e2;
    }

    .page_header
    {
    margin: 0;
    padding: 0;
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    }

    .openend textarea
    {
    width: 100%;
    }

    .options textarea
    {
    width: 100%px;
    }

    .grid textarea
    {
    width: 100%;
    }

    .text_box
    {
    width: 100%px;
    }

    .grid .text_box
    {
    width: 100%;
    }

    .indent
    {
    margin-left: 0px;
    }

    /*For text boxes and combo boxes*/
    input, select
    {
    font-size: 20px;
    }

    .progress_bar
    {
    width: 90%;
    }

4) ‘Save As’ your_mobile.css in the graphics folder for the study.
5) Upload the to the server and open the link on a mobile to double check

Thanks

commented Feb 7, 2018 by e.mason (120 points)

What about this behavior is wrong? What differences do you have in mind between the out-of-the-box MaxDiff experience and a mobile-friendly MaxDiff experience? How should the mobile-friendly MaxDiff look?

commented Feb 7, 2018 by Zachary Platinum

(127,375 points)

Hi it's more to keep it consistent with the rest of the survey (that is mobile optimised) that it has been integrated into.

I'd like the max diff to be easier to answer on a mobile, rather than the zoomed out version like a web page, so that the question font size and answer frame is in proportion to the size of the mobile's screen.
Thanks

commented Feb 7, 2018 by e.mason (120 points)

I've pulled up the sample MaxDiff study in SSI Web 8.4.8, but I have not observed a zooming problem. Even when I narrowed my browser so that it has a width of under 300px, there is no horizontal scroll bar. The MaxDiff automatically changed the font size to 14px and began to put text across multiple lines so that everything remained readable and in view of the mobile respondent. Is this not what you are observing in your testing?

commented Feb 7, 2018 by Zachary Platinum

(127,375 points)

Hi no, for some reason the code above is not working on two particular projects, although it worked in the past. So the code/process is okay?

commented Feb 7, 2018 by e.mason (120 points)

I'm suggesting that the code might not be necessary. In my testing, it seems like SSI Web already does what you are describing without the need for additional code.

If you try a MaxDiff on a mobile screen without the use of your code, is that behavior acceptable to you? If not, what do you need to change?

commented Feb 7, 2018 by Zachary Platinum

(127,375 points)

Most popular tags

Have an idea?

Your comment on this question:

Your solution to the original question