JS Helper Functions for Social Survey Questionnaires

Background

This repository provides utility javascript functions that can be used to customize social survey questionnaires like Qualtrics. These functions can be used along with any questionnaire as long as they support injecting custom JS into the survey flow.

Currently, the library provides custom functions for the following:

Autocompletion of French Professions

The library provides an autocompletion function based on vanilla HTML and CSS to provide a list of PCS professions defined by INSEE to the survey respondents based on their input value. This helps the respondents to find their professions from a list of more than 5000 pre-defined professions list.

Demo

See Demo

Getting Started

The library can be downloaded and included with a <script> tag in the HTML.

<script src="https://cdn.jsdelivr.net/npm/@cdsp-scpo/questionnaire-js-helpers/dist/questionnaire-helpers.bundled.js"></script>

If a specific version of the library is required:

<script src="https://cdn.jsdelivr.net/npm/@cdsp-scpo/questionnaire-js-helpers/dist/questionnaire-helpers.bundled.js@1.0.0"></script>

Using PCS Autocompletion

PCS autocompletion can be used with any regular HTML input field. If the ID of the target input element is pcs-professions, the helper function can be used as follows:

<script>
    questionnaireHelpers.autocompletePCSProfessions("pcs-professions");
</script>

The function autocompletePCSProfessions takes an optional argument to configure the autocompletion function. The optional argument has the following structure:

{
    strategy: "fuzzy",
    gender: "homme",
    css: {
        autocompleteItemsClass: "pcs-autocomplete-items",
        autocompleteActiveClass: "pcs-autocomplete-active",
    }
}

where each key can be explained as follows:

• strategy: Matching strategy. Can take either fuzzy or native. Default is fuzzy and it uses microfuzz to search for matches. native strategy is more basic where exact matches of input string are checked.
• gender: Gender for the professions. Default is homme.
• css: This object contains the names of the CSS classes to be used in the autocompletion containers. autocompleteItemsClass is used for the container that shows the list of matches where as autocompleteActiveClass is used for the container that highlights the current selection in rhe list. Default CSS classes can be found in the pcs.css file.

For instance, if professions for female with native search strategy is needed:

<script>
    questionnaireHelpers.autocompletePCSProfessions("pcs-professions", { strategy: "native", gender: "femme" });
</script>

License

This project is licensed under Apache 2.0 - see the LICENSE file for details.

Authors

This work has been created by the developers of CDSP at SciencesPo.