Replies: 6 comments 1 reply
-
|
Hi, George, Sorry for the simple advice, but how about trying the survey plugin (not survey-html-form)? I have no experience with it, but it has many features, so it might be able to do what you want. Regarding the first question, there might be a way to loop the timeline. Best regards, |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Dear Daiichiro, I mentioned survey-html-form only because I have used it many times in the past - happy to experiment with another plug-in, but just to make sure I understand you correctly, are you saying that the survey plug-in does the job for sure or you are suggesting I experiment with it to get the required behaviour? Best Regards, |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Dear George, I'm sorry, but I'm a beginner with SurveyJS. What I'm about to write is something I just looked up, so there might be mistakes. 1. About ValidationWhat you want to do is described in the Adding images, sound and HTML section in Examples. validators: [{
type: "regex",
text: "Oops, that's not correct. Try again!",
regex: "[rR]{1}[eE]{1}[dD]{1}"
}],In the above exapmle, regular expressions are used to restrict the input in the text box to characters similar to "red". For more detailed explanation, please refer to the following link: https://surveyjs.io/form-library/documentation/data-validation 2. How to display a text box only when "Other" is selectedWhat you want to do is probably similar to the "Contacts (optional)" section described at the following link: https://surveyjs.io/form-library/documentation/design-survey/create-a-simple-survey Here is a sample code for jsPsych. <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/jspsych@8.2.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@2.1.0"></script>
<link href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@2.1.0/css/survey.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
const surveyJson = {
pages: [
{
name: "PersonalDetails",
elements: [
{
type: "text",
name: "FirstName",
title: "Enter your first name:"
}, {
type: "text",
name: "LastName",
title: "Enter your last name:"
}, {
type: "panel",
name: "Contacts",
state: "collapsed",
title: "Contacts (optional)",
elements: [
{
type: "text",
name: "Telegram",
title: "Telegram:"
}, {
type: "text",
name: "GitHub",
title: "GitHub username:"
}
]
}
]
}
]
};
const trial = {
type: jsPsychSurvey,
survey_json: surveyJson
};
jsPsych.run([trial]);
</script>
</html>Best regards, |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Dear Daiichiro,
Many thanks for this and apologies for the late reply - I will test and
report back.
Best Regards,
George
…On Thu, 27 Mar 2025 at 01:51, Daiichiro Kuroki ***@***.***> wrote:
Dear George,
I'm sorry, but I'm a beginner with SurveyJS. What I'm about to write is
something I just looked up, so there might be mistakes.
1. About Validation
What you want to do is described in the Adding images, sound and HTML
section in Examples <https://www.jspsych.org/v8/plugins/survey/>.
validators: [{
type: "regex",
text: "Oops, that's not correct. Try again!",
regex: "[rR]{1}[eE]{1}[dD]{1}"}],
In the above exapmle, regular expressions are used to restrict the input
in the text box to characters similar to "red". For more detailed
explanation, please refer to the following link:
https://surveyjs.io/form-library/documentation/data-validation
2. How to display a text box only when "Other" is selected
What you want to do is probably similar to the "Contacts (optional)"
section described at the following link:
https://surveyjs.io/form-library/documentation/design-survey/create-a-simple-survey
Here is a sample code for jsPsych.
<!DOCTYPE html><html>
<head>
<script ***@***.***"></script>
<script ***@***.******@***.***"></script>
<link ***@***.***/css/jspsych.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" ***@***.******@***.***/css/survey.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
const surveyJson = {
pages: [
{
name: "PersonalDetails",
elements: [
{
type: "text",
name: "FirstName",
title: "Enter your first name:"
}, {
type: "text",
name: "LastName",
title: "Enter your last name:"
}, {
type: "panel",
name: "Contacts",
state: "collapsed",
title: "Contacts (optional)",
elements: [
{
type: "text",
name: "Telegram",
title: "Telegram:"
}, {
type: "text",
name: "GitHub",
title: "GitHub username:"
}
]
}
]
}
]
};
const trial = {
type: jsPsychSurvey,
survey_json: surveyJson
};
jsPsych.run([trial]);
</script></html>
Best regards,
Daiichiro
—
Reply to this email directly, view it on GitHub
<#3518 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXSHN5FM6I3RZD4BVVQUHT2WNKTBAVCNFSM6AAAAABZAX27L6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRTGUZTCNA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Dear Daiichiro,
I apologise for the late reply, I have been overwhelmed working on other
stuff and just had the time to test your code. The panel element works, but
there does not seem to be a required element on the first two questions and
an optional one on the contacts, other than the label - I will investigate
further and come back on that. Ideally, in this example we would want
something like a yes/no question on do you want to add your contact
information and upon pressing Yes the Contacts panel shows up and the
responses recorded and upon selecting No, the panel goes away and the
responses (if the user has typed something in there) are not recorded.
I will need to do some more reading on the validators and post my findings.
Best Regards,
George
…On Thu, 27 Mar 2025 at 01:51, Daiichiro Kuroki ***@***.***> wrote:
Dear George,
I'm sorry, but I'm a beginner with SurveyJS. What I'm about to write is
something I just looked up, so there might be mistakes.
1. About Validation
What you want to do is described in the Adding images, sound and HTML
section in Examples <https://www.jspsych.org/v8/plugins/survey/>.
validators: [{
type: "regex",
text: "Oops, that's not correct. Try again!",
regex: "[rR]{1}[eE]{1}[dD]{1}"}],
In the above exapmle, regular expressions are used to restrict the input
in the text box to characters similar to "red". For more detailed
explanation, please refer to the following link:
https://surveyjs.io/form-library/documentation/data-validation
2. How to display a text box only when "Other" is selected
What you want to do is probably similar to the "Contacts (optional)"
section described at the following link:
https://surveyjs.io/form-library/documentation/design-survey/create-a-simple-survey
Here is a sample code for jsPsych.
<!DOCTYPE html><html>
<head>
<script ***@***.***"></script>
<script ***@***.******@***.***"></script>
<link ***@***.***/css/jspsych.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" ***@***.******@***.***/css/survey.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
const surveyJson = {
pages: [
{
name: "PersonalDetails",
elements: [
{
type: "text",
name: "FirstName",
title: "Enter your first name:"
}, {
type: "text",
name: "LastName",
title: "Enter your last name:"
}, {
type: "panel",
name: "Contacts",
state: "collapsed",
title: "Contacts (optional)",
elements: [
{
type: "text",
name: "Telegram",
title: "Telegram:"
}, {
type: "text",
name: "GitHub",
title: "GitHub username:"
}
]
}
]
}
]
};
const trial = {
type: jsPsychSurvey,
survey_json: surveyJson
};
jsPsych.run([trial]);
</script></html>
Best regards,
Daiichiro
—
Reply to this email directly, view it on GitHub
<#3518 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXSHN5FM6I3RZD4BVVQUHT2WNKTBAVCNFSM6AAAAABZAX27L6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRTGUZTCNA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Dear George, I think that you can achieve your goal by using the Best regards, <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/jspsych@8.2.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey@2.1.0"></script>
<link href="https://unpkg.com/jspsych@8.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://unpkg.com/@jspsych/plugin-survey@2.1.0/css/survey.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
const surveyJson = {
pages: [
{
name: "PersonalDetails",
elements: [
{
type: "text",
name: "FirstName",
title: "Enter your first name:",
isRequired: true
},
{
type: "text",
name: "LastName",
title: "Enter your last name:"
},
{
type: "radiogroup",
name: "wantContact",
title: "Do you want to contact us?",
choices: ["Yes", "No"],
isRequired: true
},
{
type: "text",
name: "email",
title: "Please enter your email address",
visibleIf: "{wantContact} = 'Yes'"
},
]
}
]
};
const trial = {
type: jsPsychSurvey,
survey_json: surveyJson
};
jsPsych.run([trial]);
</script>
</html>
```html |
Beta Was this translation helpful? Give feedback.
-
|
Dear Daiichiro,
Apologies that it took me so long again to reply back, I just wanted to say
thanks for your guidance, everything worked fine.
Best Regards,
George
…On Tue, 22 Apr 2025 at 09:44, Daiichiro Kuroki ***@***.***> wrote:
Dear George,
I think that you can achieve your goal by using the isRequired and
visibleIf properties."
See the following code.
Best regards,
Daiichiro
<!DOCTYPE html><html>
<head>
<script ***@***.***"></script>
<script ***@***.******@***.***"></script>
<link ***@***.***/css/jspsych.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" ***@***.******@***.***/css/survey.css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
const surveyJson = {
pages: [
{
name: "PersonalDetails",
elements: [
{
type: "text",
name: "FirstName",
title: "Enter your first name:",
isRequired: true
},
{
type: "text",
name: "LastName",
title: "Enter your last name:"
},
{
type: "radiogroup",
name: "wantContact",
title: "Do you want to contact us?",
choices: ["Yes", "No"],
isRequired: true
},
{
type: "text",
name: "email",
title: "Please enter your email address",
visibleIf: "{wantContact} = 'Yes'"
},
]
}
]
};
const trial = {
type: jsPsychSurvey,
survey_json: surveyJson
};
jsPsych.run([trial]);
</script></html>
```html
—
Reply to this email directly, view it on GitHub
<#3518 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXSHN2TDEDCFLNWMC7BKL322XQN5AVCNFSM6AAAAABZAX27L6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEOJQGY2DSMQ>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Dear All,
I am trying to set up an experiment which includes a survey form at the beginning. The participant will answer a set of questions and then proceed to the trial (I am using survey-html-form for this). I have two questions:
i) I would like to do some form validation before submitting and have the user stay on the same screen until the validation succeeds. I can identify using Javascript when the user provides the wrong input and alert them to that, but the experiment will proceed to the next screen regardless - how can I prevent this and have them stay on the same page?
ii) I have a question that gives them a number of options and has one that says Other (please specify) - is there a way I can keep the Other (please specify) textbox hidden unless the user selects Other?
Best Regards,
George
Beta Was this translation helpful? Give feedback.
All reactions