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

remove ambiguity #422; add btn disabled css

Browse Source
This commit is contained in:
Josh de Leeuw 2017-07-06 12:58:48 -04:00
parent 2211ea1321
commit 4eb03b7f36
4 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/jspsych.css
View File

@ -89,6 +89,13 @@ input[type="text"] {
border-color: #aaa;
}
.jspsych-btn:disabled {
background-color: #eee;
color: #aaa;
border-color: #ccc;
cursor: not-allowed;
}
/* jsPsych progress bar */
#jspsych-progressbar-container {

28
examples/jspsych-button-response.html
View File

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-button-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img { width: 300px; }
</style>
</head>
<body></body>
<script>
var br_trial = {
type: 'button-response',
stimulus: 'img/happy_face_1.jpg',
choices: ['Happy', 'Sad'],
prompt: "<p class='center-content'>What emotion is this person showing?</p>",
button_html: "<a class='jspsych-btn'>%choice%</a>"
};
jsPsych.init({
timeline: [br_trial],
on_finish: function(){jsPsych.data.displayData();}
});
</script>
</html>

46
examples/jspsych-image-button-response.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-button-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img { width: 300px; }
</style>
</head>
<body></body>
<script>
var timeline = [];
timeline.push({
type: 'image-button-response',
stimulus: 'img/happy_face_1.jpg',
choices: ['Happy', 'Sad'],
prompt: "<p>What emotion is this person showing?</p>"
});
timeline.push({
type: 'image-button-response',
stimulus: 'img/happy_face_2.jpg',
choices: ['Happy', 'Sad'],
stimulus_duration: 1000,
prompt: "<p>What emotion is this person showing? (image disappears after 1s)</p>"
});
timeline.push({
type: 'image-button-response',
stimulus: 'img/happy_face_3.jpg',
choices: ['Happy', 'Sad'],
trial_duration: 2000,
response_ends_trial: false,
prompt: "<p>What emotion is this person showing? (trial ends after 2s)</p>"
});
jsPsych.init({
timeline: timeline,
on_finish: function(){jsPsych.data.displayData();}
});
</script>
</html>

2
plugins/jspsych-image-button-response.js
View File

@ -136,7 +136,7 @@ jsPsych.plugins["image-button-response"] = (function() {
display_element.querySelector('#jspsych-image-button-response-stimulus').className += ' responded';
// disable all the buttons after a response
var btns = document.querySelector('.jspsych-image-button-response-button');
var btns = document.querySelectorAll('.jspsych-image-button-response-button button');
for(var i=0; i<btns.length; i++){
//btns[i].removeEventListener('click');
btns[i].setAttribute('disabled', 'disabled');