Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

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 by e.mason (120 points)
What code were you using?  What do you want the code to do?
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
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?
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
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?
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?
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?

Your answer

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...