-
Notifications
You must be signed in to change notification settings - Fork 2
/
fsc-c_example.html
29 lines (27 loc) · 1.4 KB
/
fsc-c_example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bartkamphorst/fsc-c@5e76fc9/fsc-c.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bartkamphorst/fsc-c@5e76fc9/fsc-c.css">
<body>
<div class="fsc-c-circle-container">
<div class="fsc-c-circles fsc-c-draggable" id="fsc-c-1"><span>future self</span></div>
<div class="fsc-c-circles"><span>present self</span></div>
</div>
<div id="fsc-c-1-distance">0</div>
<div id="fsc-c-1-overlap">0%</div>
</body>
<script>
jQuery(function($) {
$( ".fsc-c-draggable" ).on( "fsc-c:data", function(event, data) {
// process the data
Object.entries(data).forEach(([id, values]) => {
console.log(id + '-distance', values['distance']);
console.log(id + '-overlap', values['overlap']);
// Qualtrics only: Uncomment the following lines into the survey flow to store the values as Qualtrics embeddedData.
// Notice that these embedded data has to be added explicitly in the survey flow in order for them to show up in your data exports.
// Qualtrics.SurveyEngine.setEmbeddedData(id + '-distance', values['distance']);
// Qualtrics.SurveyEngine.setEmbeddedData(id + '-overlap', values['overlap']);
})
})
});
</script>