View source for How it works/Forms & quizzes

{{CI inline logo}} offers effective tools for rapid creation of forms, either  standard forms with input fields aimed at receiving data from visitors, or forms with multiple choice questions or even [https://en.wikipedia.org/wiki/Cloze_test Cloze tests] to be used as teaching tools for current students or to engage prospective ones.

All forms include automatic validation, are protected by the latest version of [https://www.google.com/recaptcha/about/ Google recaptcha] and are automatically "mirrored" by the respective dynamic component on the front-end (or "by the respective parser functions on the back-end, depending on what side you are reading this page), respectively for an optimal user-experience, and to just create the form in a "programmatic" and at the same time simple way without the need to create the interface itself using, namely, a tool like "Google form", which is actually a more convoluted process.

Conversely, "CI forms" have been inspired by [https://en.wikiversity.org/wiki/Help:Quiz this extension] at [https://en.wikiversity.org/wiki/Wikiversity:Main_Page Wikiversity] and they diverge from it, apart the features above, mainly because the submitted data are sent to the provided email address, rather than used to compute a score.
<noinclude>
Here is an overview of the available options and the way to use them.

<!--
fitted to various purposes, and quizzes, which have been inspired by this [https://en.wikiversity.org/wiki/Help:Quiz Wikiversity's extension] and have further developed for an optimal user experience, and diverge mainly because the submitted data are sent to the provided email address, rather than used to compute a score.
-->


==Form with inputs==

The most common kind of form, it can contain an arbitrary number of rows (but in order to ensure a good user experience, they should not exceed 10,000) with any of the input fields among the following: 'text', 'email', 'password', 'textarea', 'email', 'search', 'tel', 'file', 'number', 'url', 'time', 'date'. The list currently reflects the [https://quasar.dev/vue-components/input#QInput-API accepted input types] by the [https://quasar.dev/ Quasar framework] inasmuch as the form is automatically converted to a Quasar component once created on the (wiki) back-end. (*** currently, in February 2021, only few of them have been tested, among which, 'text', 'email', 'textarea', 'email', but all of them will be set-up as soon as possible).

A form can be created through a template like the following:

<pre>
{{#CI form: title = Contact form
| submit = abc@test.com
| first and last name [] *
| email [email] *
| your message [textarea]  *
}}
</pre>

which produces the following result


{{#CI form: title = Contact form
| submit = support@culturaitaliana.org
| first and last name [] *
| email [email]  *
| your message [textarea]  *
}}


where the double square brackets represent an input, the asterisk a mandatory field, and the pipe is of course used to separate rows. The input symbol can be either left blank (in this case the input type is assumed to be "text"), filled-in with one of the values above (like 'email', 'textarea', etc.) or completed with a placeholder, like in the following example:

<pre>
{{#CI form: title = Contact form
| submit = abc@test.com
| [first and last name] *
| [email=email] *
| [phone=tel]
| [your message=textarea]  *
}}
</pre>


which produces the following:


{{#CI form: title = Contact form
| submit = support@culturaitaliana.org
| [first and last name] *
| [email=email] *
| [phone=tel]
| [your message=textarea]  *
}}

(note that the placeholder label is placed within the input symbol itself and the the row does not contain other text).


Inputs fields can also be displayed in a responsive way, as follows:

<pre>
{{#CI form: title = Contact form
| type = inputs responsive
| submit = abc@test.com
| first name [] *
| last name [] *
| email [email] *
| phone [tel]
| your message [textarea]  *
}}
</pre>


{{#CI form: title = Contact form
| type = inputs responsive
| submit = abc@test.com
| first name [] *
| last name [] *
| email [email] *
| phone [tel]
| your message [textarea]  *
}}

(useful rather when you are combining standard inputs with multiple choice or Cloze tests, as shown below).

Note also that the input type is 'inputs responsive', conversely to the input type by default, which is 'inputs'. <!-- (***Attention, currently, February 2021, on the front-end 'inputs responsive' is rendered using placeholders instead than labels.) -->

Predictably, the 'submit' field contains the email to which the filled-in form will be dispatched (which can be omitted as long as the variable <code>$wgCIFormsSubmitEmail</code> in LocalSettings.php is set to some value), while all forms also accept the parameters 'success message' with a message to be displayed to the user once the form has been correctly dispatched, and 'error message', where the form cannot be dispatched for any reason: also in this case the variables <code>$wgCIFormsSuccessMessage</code> and <code>$wgCIFormsErrorMessage</code> can be set instead, but they can be left blank in favor of standard messages. 
<!--
(see table below, '''List of parameters''' for a structured list depending on the kind of form)
-->

==Form with multiple choice questions==

A form intended either to create surveys of any kind, or as a teaching tool, to be combined with "Cloze tests" described below.

This is an example of multiple choice questions with arbitrary input fields among the answers:

<pre>
{{#CI form: title = Why do you want to learn Italian?
| type = multiple choice  | list-type = letters | max answers = 2
| I want to work using Italian language 
| I want to study using Italian language 
| Cultural interest / personal knowledge 
| interpersonal relationships [] *
| prospective stay in Italy 
}}
</pre>


{{#CI form: title = Why do you want to learn Italian?
| type = multiple choice  | list-type = letters | max answers = 2
| I want to work using Italian language 
| I want to study using Italian language 
| Cultural interest / personal knowledge 
| interpersonal relationships [] *
| prospective stay in Italy 
}}


where 'type' is the kind of form, 'list-type' the kind of list, which can be "none", "ordered", "unordered", "letters", "number", or any of the values listed [https://www.w3schools.com/cssref/pr_list-style-type.asp here], 'max answers' the maximum number of allowed answers, the double square brackets represent as above an input field, and the asterisk indicates as above that the preceding input field is mandatory. (an input field can be added to every row, however no more than 1 input field per row is currently expected to be found)




==Form with Cloze tests==

A kind of form mainly used to provide students with online exercises to assess their understanding of assigned teaching materials.

A [https://en.wikipedia.org/wiki/Cloze_test Cloze (completion) test] can be either with inline suggestions like the following:

<pre>
{{#CI form: title = Metti i verbi al futuro semplice
| type = cloze test 
| * Vedo, vedo... che tra poco [incontrare=incontrerai] l'uomo della tua vita
| Vedo, vedo... che [avere] una grande vincita al gioco
| Questa carta mi dice che [vincere] il concorso che hai appena fatto
| Quest'altra carta mi dice che [sposarsi] al massimo entro tre anni
| Ah, qui vedo che [fare] un viaggio molto interessante
| Qui vedo che [andare] ad abitare in un'altra citta'
}}
</pre>


{{#CI form: title = Metti i verbi al futuro semplice
| type = cloze test 
| * Vedo, vedo... che tra poco [incontrare=incontrerai] l'uomo della tua vita
| Vedo, vedo... che [avere] una grande vincita al gioco
| Questa carta mi dice che [vincere] il concorso che hai appena fatto
| Quest'altra carta mi dice che [sposarsi] al massimo entro tre anni
| Ah, qui vedo che [fare] un viaggio molto interessante
| Qui vedo che [andare] ad abitare in un'altra citta'
}}

where the asterisk at the beginning of the line denotes an example answer (conversely than indicating a mandatory field in the 'inputs' type) and the square brackets in each row denote inline suggestions (here the foreseen input type is 'text' in all cases). Also note that the example answer contains the solution after the equal symbol, conversely from the other inline suggestions.


...either with framed suggestions like the following:

<pre>
{{#CI form: title = Completa con i tempi dati al futuro semplice
|type = cloze test
| suggestions = fare, imparare, svegliarsi, imparare, andare, fare
| * Quando andrò in pensione [fare=farò] una crociera
| [] l'inglese
| [] in palestra
| [] jogging tutti i giorni
| [] a ballare il tango
| [] tardi la mattina
}}
</pre>

{{#CI form: title = Completa con i tempi dati al futuro semplice
|type = cloze test
| suggestions = fare, imparare, svegliarsi, imparare, andare, fare
| * Quando andrò in pensione [fare=farò] una crociera
| [] l'inglese
| [] in palestra
| [] jogging tutti i giorni
| [] a ballare il tango
| [] tardi la mattina
}}

Note that the suggestion ('fare') related to the solution ('farò') put in the example answer, is automatically 'canceled' in the list of suggestions.

Also note that the Cloze tests above foresee solutions to be "transformed" relatively to the provided suggestions (specifically, the suggestions are provided in infinite form, and the solutions are expected to be in future simple) while of course the suggestions can be provided "as they are", where in this case it makes sense to only list them above the answers, like in the following example:

<pre>
{{#CI form: type = cloze test 
| title = Completa come nell'esempio 
| suggestions = poca, nessun, poco, altra, molti, troppo, nessuno, tante, qualsiasi, qualche, ogni
| * C'è [altra] pasta ? Ho ancora fame
| Non c'è [] tavolo libero: aspettiamo o cambiamo ristorante?
| Ho bevuto [] spumante. Mi gira la testa.
| [] mattina la mia sveglia suona alle 7.00
| Se c'è un problema, chiamami a [] ora
| Ho scritto [] cartolina e poi sono uscito a comprare i francobolli
| Stefano legge [] romanzi gialli perché gli piace trovare il colpevole
| a [] persone passano il fine settimana fuori città
| C'è [] latte nel frigo, lo compri tu?
| Ho [] voglia di vedere mia cugina. Ultimamente non andiamo d'accordo.
| Bravo! Questo compito è perfetto. Non c'è [] sbaglio.
}}
</pre>


{{#CI form: type = cloze test 
| title = Completa come nell'esempio 
| suggestions = poca, nessun, poco, altra, molti, troppo, nessuno, tante, qualsiasi, qualche, ogni
| * C'è [altra] pasta ? Ho ancora fame
| Non c'è [] tavolo libero: aspettiamo o cambiamo ristorante?
| Ho bevuto [] spumante. Mi gira la testa.
| [] mattina la mia sveglia suona alle 7.00
| Se c'è un problema, chiamami a [] ora
| Ho scritto [] cartolina e poi sono uscito a comprare i francobolli
| Stefano legge [] romanzi gialli perché gli piace trovare il colpevole
| a [] persone passano il fine settimana fuori città
| C'è [] latte nel frigo, lo compri tu?
| Ho [] voglia di vedere mia cugina. Ultimamente non andiamo d'accordo.
| Bravo! Questo compito è perfetto. Non c'è [] sbaglio.
}}

(note that the input field in the example answer only contains 1 word, since an exact match is expected: i.e., the suggestion corresponds to the solution, without any "transformation")

Finally, "framed" suggestions (i.e. suggested words listed as argument of the parameter "suggestions") are automatically shuffled, thus it is a good practice to not put them in the right order, since the wiki-text is to be deemed open-source.



==Nested form sections==

'''CI forms''' are flexible enough to allow '''nested form sections of different kind''', like in the following example:


{{#CI form: 
title = Enrollment test
| submit = support@culturaitaliana.org

|

{{#CI form section: type = inputs responsive
| first and last name [] *
| email [email] *
| phone [tel]
}}

{{#CI form section: type = multiple choice  | list-type = letters | max answers = 2
| title = Why do you want to learn Italian?
| I want to work using Italian language 
| I want to study using Italian language 
| Cultural interest / personal knowledge 
| interpersonal relationships [] *
| prospective stay in Italy 
}}

{{#CI form section: type = multiple choice
| title = What is your profession / background ? 
| I'm a student or scholar 
| I'm an employee 
| I'm a professional or manager 
| other [] *

}}

{{#CI form section: type = multiple choice
| title = Do you have any experience of learning Italian language? 
| I haven't experience yet
| Few personal attempts
| I have taken private lessons during [] *
| I have attended classes during [] *
}}

}}


where the form is built using the following model:

<pre>

{{#CI form: title = Enrollment test 
| submit = abc@test.com
|

{{#CI form section: type = inputs
| first and last name [] *
| email [email] *
| phone [tel]
}}

{{#CI form section: ... }}

... [additional 'CI form sections']

}}

</pre>

where in short the parser function 'CI form' becomes a container for the parser function 'CI form section' and the latter is characterized with a type (either 'inputs', 'multiple choice questions', or 'cloze test') a title, and the related content. (see table below '''List of parameters''' for all the accepted parameters)

This model allows a large combination of possible forms able to cover a correspondent wide range of needs, and, the most important, to create either a form with inputs, a multiple choice question test, or a Cloze test, in minutes, just filling-in with different contents predefined templates similar or identical to those shown as example.





==List of parameters==

{| class="wikitable"
|+
!attribute
!scope
!description
|-
|type
|CI form or CI section
|type of form or section: "inputs", "inputs responsive", "multiple choice" or "cloze test"
|-
|title
|CI form or CI section
|form or section title
|-
|submit
|CI form
|list of email addresses (comma separated) to which the filled-in form will be dispatched
|-
|success message
|CI form
|the message displayed after submission of the form if the form has been correctly sent
|-
|error message
|CI form
|the message displayed after submission of the form if there was any issue sending the form
|-
|suggestions
|CI form or CI section with type "cloze test"
|list of comma separated words to be used as a reference to complete the various answers and shown in a box above the answers 
|-
|list-type
|CI form or CI section with type "multiple choice questions"
|the list type of the answers, can be "none", "ordered", "unordered", "letters", "number", or whatever value listed [https://www.w3schools.com/cssref/pr_list-style-type.asp here]
|-
|max answers
|CI form or CI section with type "multiple choice questions"
|maximum number of answers
|-
|form class
|CI form
|additional class of the form (for styling)
|}

== Known issues ==

Due to [https://phabricator.wikimedia.org/T52855 this Visual Editor's bug], if the 1st parameter after the function name is separated by a new line, Visual Editor will not recognize the template/parser function and will surround it with unwanted 'nowiki' tags. Therefore use always the following

<pre>
{{#CI form: title = Completa con i tempi dati al futuro semplice
|...
}}
</pre>

rather than the following

<pre>
{{#CI form: 
title = Completa con i tempi dati al futuro semplice
|...
}}
</pre>




== Additional examples ==


'''Cloze test with sentences'''

Since version 1.1 CIForms allow multiple inputs in the answers of cloze and multiple choice tests. This allows to easily create a quiz like the following (adapted from [https://en.wikiversity.org/wiki/Help:Quiz-Simple this page])<br>
Also note that html is allowed everywhere in the form definition, while wiki-text is only allowed in titles.


<pre>
{{#CI form: title = Complete the text from the Wikipedia article on [[w:Aristotle|Aristotle]]
| type = cloze test | list-type = none
| <b>Early Years</b> <br> Aristotle was born in [] in Chalcidice. His parents were []  and [], who became physician to King Amyntas of Macedon. <br> Aristotle was educated as a member of the aristocracy. At about the age of [], he went to [] to continue his education at []'s Academy.
}}
</pre>

{{#CI form: title = Complete the text from the Wikipedia article on [[w:Aristotle|Aristotle]]
| type = cloze test | list-type = none
| <b>Early Years</b> <br> Aristotle was born in [] in Chalcidice. His parents were []  and [], who became physician to King Amyntas of Macedon. <br> Aristotle was educated as a member of the aristocracy. At about the age of [], he went to [] to continue his education at []'s Academy.
}}



'''Dialogues'''

Dialogues can be created using a cloze test with list-type = none with rows separated by line breaks, as follows. (note that html is allowed everywhere in the form definition, while wiki-text is only allowed in titles)

<pre>
{{#CI form: title = Fare la conoscenza 
| type = cloze test | list-type = none |
<span style="font-weight:bold">A</span> Ciao, [] ti chiami? <br/>
<span style="font-weight:bold">B</span> Mi [] Lucia, piacere e tu come ti chiami? <br/>
<span style="font-weight:bold">A</span> Piacere Lucia io mi chiamo Paolo e[] di Firenze. E tu di dove sei?  <br/>
<span style="font-weight:bold">B</span> Io abito a Roma, ma io[] di un piccolo paese che si chiama Sutri. <br/>
<span style="font-weight:bold">A</span> Io sono nato a Firenze e [] a Firenze, vicino al Duomo di Santa Maria del Fiore. <br/>
<span style="font-weight:bold">B</span> Io abito a Roma da 7 anni. I miei genitori [] originari della Germania. Si sono trasferiti in Italia per lavoro. Io sono nata in Italia. <br/>
<span style="font-weight:bold">A</span> Lucia quanti anni [] ? <br/>
<span style="font-weight:bold">B</span> Io [] 35 anni e tu Paolo quanti anni hai? <br/>
<span style="font-weight:bold">A</span> Io ho 40 anni. [] fratelli o sorelle? <br/>
<span style="font-weight:bold">B</span> Si, [] un fratello che si chiama Alessandro e una sorella che si chiama Matilde. Loro [] più piccoli di me. Tu hai fratelli Paolo? <br/>
<span style="font-weight:bold">A</span> Io sono figlio unico, ma due anni fa sono diventato padre e [] 2 bambine, Ludovica e Federica <br/>
<span style="font-weight:bold">B</span> Cosa [] di lavoro Paolo? <br/>
<span style="font-weight:bold">A</span> Io sono un insegnante. E te che lavoro fai Lucia? <br/>
<span style="font-weight:bold">B</span> Io sono una cuoca. Adesso Paolo devo salutarti. Ci vediamo! Ciao <br/>
<span style="font-weight:bold">A</span> Ciao Lucia, è stato un piacere conoscerti, a presto <br/>
}}

</pre>


{{#CI form: title = Fare la conoscenza 
| type = cloze test | list-type = none |

<span style="font-weight:bold">A</span> Ciao, [] ti chiami? <br/>
<span style="font-weight:bold">B</span> Mi [] Lucia, piacere e tu come ti chiami? <br/>
<span style="font-weight:bold">A</span> Piacere Lucia io mi chiamo Paolo e[] di Firenze. E tu di dove sei?  <br/>
<span style="font-weight:bold">B</span> Io abito a Roma, ma io[] di un piccolo paese che si chiama Sutri. <br/>
<span style="font-weight:bold">A</span> Io sono nato a Firenze e [] a Firenze, vicino al Duomo di Santa Maria del Fiore. <br/>
<span style="font-weight:bold">B</span> Io abito a Roma da 7 anni. I miei genitori [] originari della Germania. Si sono trasferiti in Italia per lavoro. Io sono nata in Italia. <br/>
<span style="font-weight:bold">A</span> Lucia quanti anni [] ? <br/>
<span style="font-weight:bold">B</span> Io [] 35 anni e tu Paolo quanti anni hai? <br/>
<span style="font-weight:bold">A</span> Io ho 40 anni. [] fratelli o sorelle? <br/>
<span style="font-weight:bold">B</span> Si, [] un fratello che si chiama Alessandro e una sorella che si chiama Matilde. Loro [] più piccoli di me. Tu hai fratelli Paolo? <br/>
<span style="font-weight:bold">A</span> Io sono figlio unico, ma due anni fa sono diventato padre e [] 2 bambine, Ludovica e Federica <br/>
<span style="font-weight:bold">B</span> Cosa [] di lavoro Paolo? <br/>
<span style="font-weight:bold">A</span> Io sono un insegnante. E te che lavoro fai Lucia? <br/>
<span style="font-weight:bold">B</span> Io sono una cuoca. Adesso Paolo devo salutarti. Ci vediamo! Ciao <br/>
<span style="font-weight:bold">A</span> Ciao Lucia, è stato un piacere conoscerti, a presto <br/>
}}



'''Tables'''

Tables with input-cells can be created, as above, using a cloze test type, and then styling the table through html and a related stylesheet. Note that for the table below we use the parameter <code>form class = table_test</code> to add an additional class to the form, so that we can override the standard styles where needed. Also note the css rules between the tag <code><style> ... </style></code> visible in the [https://culturaitaliana.org/w/index.php?title=How_it_works/Forms_%26_quizzes&action=edit&section=7 source code] of this page.


<html>
 <style>
#table_test {
 background-color: white;
}
 #table_test td {
 border: 1px solid black;
 padding: 6px;
}
#table_test,  #table_test th {
 border: 1px solid black;
 border-collapse: collapse;
 text-align: center;
 padding: 6px;
}
#table_test th {
 border: 1px solid black;
 padding: 6px;
 background-color: #f7dfd3;
}
.table_test {
 max-width: 820px;
}
</style>
</html>

{{#CI form: title =  Completa la tabella inserendo le forme mancanti. Se non le conosci, guarda sul dizionario o chiedi aiuto a un compagno 
| form class = table_test
| submit = istitutoculturaitaliana@gmail.com, federica.amaducci@culturaitaliana.org, fabrizio.vielmini@culturaitaliana.org, shorena.baramidze@culturaitaliana.org
| success message = Thank you, we have received your form and we will send you a feedback as soon as possible !
| error message = There was some issue in the form submission. Please write at support@culturaitaliana.org to receive support

|
{{#CI form section: type = inputs responsive
| first name [] *
| last name [] *
}}

{{#CI form section: type = cloze test | list-type = none |
<table id="table_test">
<tr><th>Maschile</th><th>Femminile</th><th>Maschile</th><th>Femminile</th></tr>
<tr><td>il ragazzo</td><td>la ragazza</td><td>il gallo</td><td>la gallina</td></tr>
<tr><td>il cavallo</td><td>[]</td><td>il re</td><td>[]</td></tr>
<tr><td>l’elefante</td><td>[]</td><td>[]</td><td>la cugina</td></tr>
<tr><td>[]</td><td>la lettrice</td><td>il cane</td><td>[]</td></tr>
<tr><td>il bidello</td><td>[]</td><td>[]</td><td>la maestra</td></tr>
<tr><td>lo zio</td><td>[]</td><td>il giornalista</td><td>[]</td></tr>
<tr><td>[]</td><td>la telefonista</td><td>il lattaio</td><td>[]</td></tr>
<tr><td>il fidanzato</td><td>[]</td><td>il sarto</td><td>[]</td></tr>
<tr><td>[]</td><td>la contadina</td><td>il suonatore</td><td>[]</td></tr>
<tr><td>lo sciatore</td><td>[]</td><td>[]</td><td>la pianista</td></tr>
<tr><td>il regista</td><td>[]</td><td>il panettiere</td><td>[]</td></tr>
<tr><td>[]</td><td>la professoressa</td><td>il preside</td><td>[]</td></tr>
<tr><td>[]</td><td>la biologa</td><td>lo studente</td><td>[]</td></tr>
<tr><td>il segretario</td><td>[]</td><td>[]</td><td>la nonna</td></tr>
</table>
<br>
reference: <a target="_blank" href="https://italianofacile.files.wordpress.com/2011/06/scheda6_ilgeneredelnome_maschilefemminile.pdf"> https://italianofacile.files.wordpress.com/2011/06/scheda6_ilgeneredelnome_maschilefemminile.pdf</a>

}}

}}




<!--
==Dynamic components==

Because the hybrid nature of this platform, the forms can be submitted (and they work!) both on the wiki "back-end", and on the Quasar-vuejs front-end. In the first case the form is interpreted by a special page ([[Special:CIFormSubmit]]), and in the second case by the front-end itself, and then in both cases the resulting structured data are sent to a Node.js back-end which actually dispatches the email with the form content to the recipient. 
-->

</noinclude>