Per creare una pagina per un sondaggio si può utilizzare survey js che è una libreria jquery che rende più facile la creazione di un form e che segue una logica in base alle risposte date.
Vediamo come:
si aggiunge in una semplice pagina html gli script delle librerie all’interno del tag head:
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
</head>
Si aggiunge nel tag body l’elemento che racchiuderà nella pagina il form con le domande:
<div id="surveyContainer"></div>Si aggiunge alla fine della pagina html gli script per il funzionamento:
<script src="./survey.js"></script>
<script src="./index.js"></script>il primo file chiamato survey conterrà la logica e le domande in formato JSON, il secondo (index.js) conterrà il codice javascript che gestirà e farà funzionare il modulo.
all’interno del file survey.js avremo quindi le domande in formato JSON:
const json = {
"completedHtml" : "<h2>Grazie per aver risposto! </h2>",
"title": "Testo della intestazione che apparirà a inizio pagina",
"pages" : [
{
"elements": [
{
"type" : "html",
"name" : "info",
"minWidth" : "300px",
"html": "<h2>Testo da visualizzare</h2>"
},
{
"name": "domanda1",
"type": "comment",
"title": "1) Testo delle domanda?",
"description" : "Descrizione facoltativa",
"isRequired": true,
"maxLength" : 300
},
{
"name": "domanda2",
"title": "2) testo domanda?",
"type": "radiogroup",
"colCount" : 2,
"choices": [ "Sì", "No", "Non so", "Non ricordo"],
"isRequired": true,
},
{
"name": "domanda3",
"title": "Testo Domanda",
"type": "radiogroup",
"showOtherItem" : true,
"colCount" : 2,
"choices": [ "scelta 1", "scelta 2", "scelta 3", "ecc"],
"isRequired": true,
"visibleIf" : "{domanda2} = 'Non ricordo'"
},
]}completedHtml indica il testo per il messaggio finale mentre in elements abbiamo le varie sezioni che compongono le domande, in questo caso ho usato type : html per visualizzare un semplice contenuto in html mentre type : comment per dire che il campo di input è un campo di testo grande (textarea), radiogroup se devono essere radio button cioè risposta singola o checkbox per le domande a scelta multipla.
Il campo showOtherItem indica se visualizzare o no il campo di scelta “altro” che visualizzerà il campo di testo per la scelta libera.
in isRequired è indicato se è obbligatoria la risposta con true o false se non lo è, maxLength invece indica la lunghezza massima in caratteri della risposta.
Nella terza domanda si nota la voce visibleIf che è la condizione per fare apparire quella specifica domanda, in questo caso se alla domanda 2 si è risposto “non ricordo”.
Nel file index.js invece abbiamo la gestione e l’invio dei dati, in questo caso invia a una pagina php che effettuerà l’inserimento nel db o l’invio dei dati tramite email:
var myCss = {
question: {
content: "sd-question__content question_content_custom",
titleOnAnswer: "question-title-answered"
}
};
const survey = new Survey.Model(json);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data));
var xhr = new XMLHttpRequest();
xhr.open("POST", "file.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("sender=" + JSON.stringify(sender.data));
});
survey.css = myCss;
survey.completeText = "Invia le risposte";
survey.locale = 'it';
survey.showQuestionNumbers = false;
survey.focusFirstQuestionAutomatic = false;
survey.maxOthersLength = 1000;
$("#surveyContainer").Survey({ model: survey });completeText è il testo per il bottone di invio, showQuestionNumbers indica se visualizzare un numero per ogni domanda, focusFirstQuestionAutomatic indica true se vuoi che la pagina scorre subito alla prima domanda, maxOthersLength invece imposta la lunghezza massima di caratteri del campo “altro” nel caso ci sia una checkbox con campo altro, cioè un campo di testo che compare nel caso si abbia selezionato la voce “altro”.
Ci sono molte opzioni da poter utilizzare all’occorrenza, sia per la visualizzazione delle domande che per la logica.
Rimando alla documentazione ufficiale per ulteriori approfondimenti:
https://surveyjs.io/form-library/documentation/design-survey/create-a-simple-survey