jsPsych/packages/plugin-survey/example.html

60 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<script src="../jspsych/dist/index.browser.js"></script>
<script src="./dist/index.browser.js"></script>
<link rel="stylesheet" href="../jspsych/css/jspsych.css">
<link rel="stylesheet" href="css/plugin-survey.css">
</head>
<body></body>
<script type="text/javascript">
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
var options = ['option 1', 'option 2', 'option 3', 'option 4', 'option 5', 'option 6'];
var survey_trial = {
type: jsPsychSurvey,
pages: [
[
{type: 'html', prompt: '<p>Here is some arbitrary text via an "html" question type.<br>Similar to preamble but can be inserted anywhere in the question set.</p><p>This trial uses automatic question numbering (continued across pages).</p>'},
{type: 'text', prompt: 'This is a single-line text question.'},
{type: 'text', prompt: 'This is a multi-line text question.', placeholder: 'This is a placeholder.', textbox_rows: 10, textbox_columns: 40},
],
[
{type: 'multi-choice', prompt: 'This is a multi-choice question with options in one column (the default).', options: options},
{type: 'multi-choice', prompt: 'This is a multi-choice question with options in one row.', options: options, columns: 0},
{type: 'multi-choice', prompt: 'This is a multi-choice question with options in two columns, with an "other" option.', options: options, columns: 2, add_other_option: true},
{type: 'html', prompt: '<p>Another HTML question type.<br>Don&#39;t forget to answer the next question!</p>'},
{type: 'multi-select', prompt: 'This is a multi-select question.', options: options},
{type: 'multi-select', prompt: 'This is a multi-select question with three columns and random option ordering.', options: options, columns: 3, option_reorder: 'random'},
]
],
button_label_next: "Next >",
button_label_back: "< Back",
button_label_finish: "Finish!",
show_question_numbers: 'on'
};
var survey_trial_random = {
type: jsPsychSurvey,
pages: [[
{type: 'text', prompt: 'Question 1.', textbox_rows: 2, textbox_columns: 20},
{type: 'text', prompt: 'Question 2.'},
{type: 'text', prompt: 'Question 3.', textbox_columns: 50},
{type: 'text', prompt: 'Question 4.', textbox_rows: 2},
{type: 'text', prompt: 'Question 5.'},
{type: 'text', prompt: 'Question 6.', textbox_rows: 10, textbox_columns: 20},
]],
title: 'This is a separate survey trial. The order of questions should be randomized.',
randomize_question_order: true
};
jsPsych.run([survey_trial, survey_trial_random]);
</script>
</html>