Have an idea?

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

Is measuring the time duration a mouseover is active possible?

Within my CBC analysis I'd like to find out if a respondent triggered a mouseover by accident or deliberately.

Therefore I'm looking for a possibility, to measure the time duration the mouseover is active.

Can this be achieved within Lighthouse Studio?

Thank you very much for any assistance!

Kind regards,
Philipp
asked Nov 18, 2019 by Philipp
This mouseover behavior is coming from using the ToolTip function in one of your CBC levels, correct?
Hi Zachary, yes that is correct.
I'm using HTML code within one of the CBC levels to show a picture and mouseover text:

<img src="[%GraphicsPath()%]PictureName.PNG" alt="" border="0"><br>
<span class="tool_tip_link">Details</span>
<div class="tool_tip_text" style="max-width: none;">
<img src="[%GraphicsPath()%]Mouseover_Picture.PNG" alt="" border="0"></div>

1 Answer

+1 vote
 
Best answer
To start, we'll need to add a free format question to the same page as any CBC tasks where you want to record this time.  The free format question should be given a hidden, decimal type variable named "_mouseover."  The HTML for the free format question can be set to this:

<input name="[% QuestionName() %]_mouseover" id="[% QuestionName() %]_mouseover" type="hidden" value=""/>

<script>
$(document).ready(function(){
    var startTime;
    $('.tool_tip_link').mouseover(function(){
        startTime = new Date();
    }).mouseout(function(){
        var diff = new Date() - startTime;
        var time = Number($('#[% QuestionName() %]_mouseover').val()) || 0;
        time += diff / 1000;
        $('#[% QuestionName() %]_mouseover').val(time.toFixed(2));
    });
})
</script>


Note that I am assuming there only exists one tooltip on the page.  If multiple exist that need to be recorded separately, the code will need to be adjusted.
answered Nov 18, 2019 by Zachary Platinum Sawtooth Software, Inc. (147,200 points)
Thank you very much for the quick reply. It is working!

Unfortunately there will be 6 mouseovers per page (two levels per concept, three concepts) that shall be recorded separately.

I'd really much appreciate another hint on how to modify the code accordingly.

Thanks a lot!
To support multiple tooltips, we'll want to start by adding unique IDs to each tooltip.  For example, the first of these:

<span class="tool_tip_link">


could be changed to this:

<span class="tool_tip_link" id="tooltip1">


The free format question will need six variables instead of just one.

Finally, my posted code can be repeated six times.  In each repeat, ".tool_tip_link" will need to be replaced with "#tooltip1" (or whatever ID you gave to that respective tooltip HTML) and each "_mouseover" will need to be updated with the name of that free format variable.
Thank you Zachary! Much appreciated.
Zachary, I'd like to ask for your support one more time.

As mentioned before, I'm having six levels in my CBC, that require the tracking of the mouseover time. Let's assume the following:
If mouseover1 is used multiple times within one of the CBC concepts, then the code is working fine and the sum of all mouseover durations will be stored in the variable.
However, if mouseover1 is available multiple times on a CBC page (in multiple concepts), then using it in concept1 and afterwards using it in concept2 will not track the second duration. Instead only the duration of the concept1 mouseover will be stored.

Can the code be changed so that the total sum of all mouseover durations will be stored in the related variable?

Thank you very much in advance!
If there are going to be multiple instances of a tooltip on a page, we'll need to give the tooltips a class rather than an ID:

<span class="tool_tip_link tooltip1">


Then the script ought to use a period instead of a number sign: ".tooltip1"
After changing the code, the durations don't seem to be recorded anymore according to the debugging screen. (values are not being displayed)

Please see one example below.

Did I miss something? Thank you.

The Tooltip name:
<span class="tool_tip_link" class="tooltipOekoBasis">


And the script for the timer with the related variable being called "MouseoverTimer_OekoBasis":
<input name="[% QuestionName() %]_OekoBasis" id="[% QuestionName() %]_OekoBasis" type="hidden" value=""/>
 
<script>
$(document).ready(function(){
    var startTime;
    $('.tooltipOekoBasis').mouseover(function(){
        startTime = new Date();
    }).mouseout(function(){
        var diff = new Date() - startTime;
        var time = Number($('#[% QuestionName() %]_OekoBasis').val()) || 0;
        time += diff / 1000;
        $('#[% QuestionName() %]_OekoBasis').val(time.toFixed(2));
    });
})
</script>
I have updated my last comment.  Please try again.
Thank you ever so much! It works.
...