HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-11 16:18:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rename, update slider plugin #403

Browse Source
This commit is contained in:
Josh de Leeuw 2017-07-01 23:01:21 -04:00
parent 53d98cc206
commit d882b4aa36
4 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/jspsych-survey-slider.html → examples/jspsych-slider-response.html
View File

@ -16,8 +16,9 @@
<body></body>
<script>
var block_1 = {
type: 'survey-slider',
questions: ['<p>How similar are these pictures?</p><img src="img/happy_face_1.jpg"></img><img src="img/sad_face_1.jpg"></img>'],
type: 'slider-response',
stimulus: '<p>How similar are these pictures?</p><img src="img/happy_face_1.jpg"></img><img src="img/sad_face_1.jpg"></img>',
labels: ["Not at all similar", "Sort of", "Identical"]
}
jsPsych.init({

35
plugins/jspsych-survey-slider.js
View File

@ -1,5 +1,5 @@
/**
* jspsych-survey-slider
* jspsych-slider-response
* a jspsych plugin for free response survey questions
*
* Josh de Leeuw
@ -9,12 +9,12 @@
*/
jsPsych.plugins['survey-slider'] = (function() {
jsPsych.plugins['slider-response'] = (function() {
var plugin = {};
plugin.info = {
name: 'survey-slider',
name: 'slider-response',
description: '',
parameters: {
@ -25,36 +25,45 @@ jsPsych.plugins['survey-slider'] = (function() {
trial.preamble = typeof trial.preamble == 'undefined' ? "" : trial.preamble;
trial.button_label = typeof trial.button_label === 'undefined' ? 'Next' : trial.button_label;
//trial.slider_width = trial.slider_width || 400;
// if any trial variables are functions
// this evaluates the function and replaces
// it with the output of the function
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
// show preamble text
var html = '<div id="jspsych-survey-slider-preamble" class="jspsych-survey-slider-preamble">'+trial.preamble+'</div>';
var html = '<div id="jspsych-slider-response-preamble" class="jspsych-slider-response-preamble">'+trial.preamble+'</div>';
// add questions
for (var i = 0; i < trial.questions.length; i++) {
html += '<div id="jspsych-survey-slider-"'+i+'" class="jspsych-survey-slider-question" style="margin: 2em 0em;">';
html += '<div class="jspsych-survey-slider-question-text">' + trial.questions[i] + '</div>';
html += '<input type="range" name="#jspsych-survey-slider-response-' + i + '"></input>';
html += '</div>';
html += '<div id="jspsych-slider-response" class="jspsych-slider-response-question" style="margin: 2em 0em;">';
html += '<div class="jspsych-slider-response-question-text">' + trial.stimulus + '</div>';
html += '<div class="jspsych-slider-response-container" style="position:relative;"><input type="range" style="width: 100%;" name="jspsych-slider-response-response"></input>';
html += '<div>'
for(var j=0; j < trial.labels.length; j++){
var width = 100/(trial.labels.length-1);
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
html += '</div>'
}
html += '</div>';
html += '</div>';
html += '</div>';
// add submit button
html += '<button id="jspsych-survey-slider-next" class="jspsych-btn">'+trial.button_label+'</button>';
html += '<button id="jspsych-slider-response-next" class="jspsych-btn">'+trial.button_label+'</button>';
display_element.innerHTML = html;
display_element.querySelector('#jspsych-survey-slider-next').addEventListener('click', function() {
display_element.querySelector('#jspsych-slider-response-next').addEventListener('click', function() {
// measure response time
var endTime = (new Date()).getTime();
var response_time = endTime - startTime;
// create object to hold responses
var question_data = {};
var matches = display_element.querySelectorAll('div.jspsych-survey-slider-question');
var matches = display_element.querySelectorAll('div.jspsych-slider-response-question');
for(var index=0; index<matches.length; index++){
var id = "Q" + index;
var val = matches[index].querySelector('input').value;

16
tests/plugins/plugin-slider-response.test.js Normal file
View File

@ -0,0 +1,16 @@
const root = '../../';
jest.useFakeTimers();
describe('slider-response plugin', function(){
beforeEach(function(){
require(root + 'jspsych.js');
require(root + 'plugins/jspsych-slider-response.js');
});
test('loads correctly', function(){
expect(typeof window.jsPsych.plugins['slider-response']).not.toBe('undefined');
});
});

16
tests/plugins/plugin-survey-slider.test.js
View File

@ -1,16 +0,0 @@
const root = '../../';
jest.useFakeTimers();
describe('survey-slider plugin', function(){
beforeEach(function(){
require(root + 'jspsych.js');
require(root + 'plugins/jspsych-survey-slider.js');
});
test('loads correctly', function(){
expect(typeof window.jsPsych.plugins['survey-slider']).not.toBe('undefined');
});
});