Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

THEMA: Using canvas to capture user responses in Limesurvey

Using canvas to capture user responses in Limesurvey 4 Monate 3 Wochen her #105731

  • asid2014
  • asid2014s Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 3
  • Karma: 0
Hi,

I have developed a JavaScript (jQuery is used for the drag and drop functionality) program to capture user selections using html canvas. Basically users are presented with a time-line which is divided into three rectangular areas. They can click on these rectangles and for each click, a select drop down appears with various options (Note: Each rectangular area has different drop down options, the users can add several drop downs). The idea is to allow people to specify what they did during the shown time-line by selecting options from the select drop down. The x-axis value on the time is captured behind the scene in a hidden text box (each select drop down has it's own associated text box for storing x value). People can also drag and drop the select drop downs they have already added within the same rectangular area. For drag and drop I am using jQuery draggable and droppable.

The above program is working with minor cross browser issues. Unfortunately I can't attach the code or even the screen shot now because this is for a research project and it's not made available for public yet. Now I have the following two questions:

1) When I copy and paste the code in limesurvey (question type is my next question, for this it's long free text) ->edit question then source, I get the following error (firebug in firefox) (it seems it doesn't like the use of curly bracket in the following way):

===================================================================================
$(c).droppable({drop: dropIt, tolerance: 'fit'});

SyntaxError: syntax error
$(c).droppable(<span style='background-color: #eee8aa;'><span title='Undefined variable'...........


var bottomRectX = sX + lineWidth, bottomRectY = h - 50, bottomRectW = w - sX, bottomRectH = 50;
var bottomRect = {x:bottomRectX,y:bottomRectY,width:bottomRectW,height:bottomRectH};

SyntaxError: syntax error
var bottomRect = <span style='background-color: #eee8aa;'><span title='Undefined variable'..........
=====================================================================

I have only listed couple of instances but there are few more similar ones. Is it possible to stop this { bracket issue?

2)Which question type I should use for this type of question? Array(numbers), Array by column, etc?
For Each rectangular area I am trying to capture the selected drop down value (from Select drop down) and the x location value (text box). Note there can be several drops and several associated text boxes. In other words, you can say if this is not done without the canvas then there will be 6 columns (2 for each rectangular area). If I know which question type to use then how will the data be captured in limesurvey? I mean if I set the ids for drop downs and text boxes in a particular limesurvey recommended format (manual.limesurvey.org/SGQA_identifier) then will the data be captured correctly?

Can you please help me with the above. Thanks a lot.

BTW I am using Limesurvey version 2.05+ Build 140204
Letzte Änderung: 4 Monate 3 Wochen her von asid2014. Begründung: typo
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Using canvas to capture user responses in Limesurvey 4 Monate 3 Wochen her #105742

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4050
  • Dank erhalten: 740
  • Karma: 341
1) You need to leave a space or line-break after every opening curly brace and before every closing curly brace or Expression Manager will attempt to parse whatever is inside the braces - manual.limesurvey.org/Workarounds:_Manip...ime_using_Javascript.

2) Sorry, I'm having trouble following the concept so without screenshots or more info I can't advise.

Also, be aware that the HTML5 Canvas element is not supported in IE 8 and below.


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Using canvas to capture user responses in Limesurvey 4 Monate 2 Wochen her #105816

  • asid2014
  • asid2014s Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 3
  • Karma: 0
Thank you tpartner for replying to my post. Please see my response below:

1) Thank you for pointing this out. It's now working.

2) Yes we are aware that Html5 Canvas doesn't work in IE8 and we are OK with that. Now let me try and explain what we are trying to do.

Hopefully the example below will give you an idea:

Say there are three main, independent variables: Variable 1 = On-duty, Variable 2 = Off-duty, Variable 3 = Mood.

Answer options (to appear in drop downs) are:
On-dutyOff-dutyMood
Write reportsWatch TVHappy
EmailEatStressed out
MeetingsSocialiseBored
Other


Instead of seeing the variables presented as above, users will be presented with an image split into three stacked areas. Area 1 will be reserved for On-duty answers, Area 2 for Off-duty answers and Area 3 for Mood answers. When users click anywhere in an area, a drop down for the appropriate variable will appear. An answer is selected from that drop down and users can then slide/drag that drop down horizontally to wherever they want within that area before dropping it in the chosen location. If appropriate, users can click in that area again and bring up more drop downs and slide/drag-and-drop them along the horizontal plane within that area. In other words, users can change the sequence of their answers. They can also remove any answers by deleting drop downs if they want. All these same actions may be performed for the other two areas. Thus we actually need to capture values to six variables:

(i) potentially multiple answers for the On-duty variable; (ii) the locations (X co-ordinates) of all the answers for the On-duty variable; (iii) potentially multiple answers for the Off-duty variable; (iv) the locations (X co-ordinates) of all the answers for the Off-duty variable; (v) potentially multiple answers for the Mood variable; (vi) the locations (X co-ordinates) of all the answers for the Mood variable (Note, no Y co-ordinates because, as said, participants can only move the answers horizontally).

To achieve the above functionality we have used html5 Canvas and have created a version which is working fine outside of a questionnaire software (e.g. Limesurvey). Using the Canvas approach, we are able to capture three main variables in columns as well as the location values which are being captured automatically using hidden text boxes.

We would like to incorporate the above into LimeSurvey. We are able to copy and paste our code into Limesurvey (using ->edit question then source as mentioned previously) and now can see it visually working fine. However, we need some help as to how to store/capture the data in the Limesurvey database?. We understand that you always have to start by choosing a question type. We’re not sure which would be best. We presume it would be one of the arrays. We know that the Array (Numbers) and Array Dual Scale questions can include drop downs. Please recommend.

Based on your recommendation, if we set the ids for drop downs and text boxes in a particular Limesurvey recommended format (manual.limesurvey.org/SGQA_identifier) then will the data be captured correctly? do we have to do something else?

Thank you for your help.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Using canvas to capture user responses in Limesurvey 4 Monate 2 Wochen her #105819

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4050
  • Dank erhalten: 740
  • Karma: 341
I would use separate list-dropdown questions to record the activities and multiple-numeric questions to record the X coordinates of each.

Rather than creating dropdowns in your canvas, use jQuery to physically move the LimeSurvey dropdowns there.


.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Using canvas to capture user responses in Limesurvey 4 Monate 2 Wochen her #105842

  • asid2014
  • asid2014s Avatar
  • OFFLINE
  • Fresh Lemon
  • Beiträge: 3
  • Karma: 0
Thank you tpartner for replying.

1) By using list drop downs rather than an array it would seem that every answer to a variable is treated as a separate question. This is not strictly the case. For the each variable, we will get multiple answers, e.g. user may say that they did 8 on-duty tasks plus 4 off-duty tasks (before, between and after their off-duty tasks) and their mood varied across these tasks. The stored answers might look something like this:
Off-dutyArea 1 location (x co-ordinate)On-dutyArea 2 location (x co-ordinate)MoodArea 3 location (x co-ordinate)
Email2Eat1Happy1
Write reports3Eat5Happy2
Email4Eat11Bored3
Other6Socialise12Happy4
Meeting7Happy5
Other9Bored8
Email10Bored6
Meeting8Stressed out7
Stressed out9
Happy10
Happy11
Happy12


Therefore we thought an array might be better suited?

2) We don’t know in advance how many answers participants will select for each variable; it all depends on their given circumstances. Therefore it would be easier if we could create the drop downs (and the text box for capturing their associated x co-ordinate) on the fly when the user clicks on the canvas. This is what we are able to do in our version (i.e. the one which is currently not integrated with Limesurvey or any other survey software). We basically just have a canvas divided into three areas where users can click and a drop down and its associated hidden text box is created on the fly (i.e. dynamically). Is it possible to create a drop down/text box (i.e. an input control) for a question on the fly in limesurvey?

3) Users will be asked to review their answers and can move them around if they realise they’re not in the right order (hence the need to capture the location as well). However, they’ve also got the option to delete answers (i.e. drop down) if need be. Is it possible to delete a drop down/text box (i.e. an input control) for a question on the fly in limesurvey?

Thanks
Der Administrator hat öffentliche Schreibrechte deaktiviert.

Using canvas to capture user responses in Limesurvey 4 Monate 2 Wochen her #105845

  • tpartner
  • tpartners Avatar
  • OFFLINE
  • LimeSurvey Team
  • Beiträge: 4050
  • Dank erhalten: 740
  • Karma: 341
Unfortunately, all question must be defined before survey activation.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: ITEd
Ladezeit der Seite: 0.157 Sekunden
Donation Image