Use case

This methodology is often used in CAPI surveys, where you want the interviewer to avoid re-entering the same data twice. A typical use case is an agent interviewing passengers on a single bus line.

Once the agent has entered the bus line during the 1st interview, we want to pre-fill this question for new interviews, while leaving the possibility for the agent to edit at a later stage.

Compatibility

• We rely on HTML's LocalStorage for this example, which has limited browser support. Details here.
• Design 5.3.5 and above.

5.4.6+ Version of the script : download here

1st screen : Reading a stored value and putting it into a variable

<script> 
document.addEventListener("DOMContentLoaded", function () {
    var previousAnswers = localStorage["previousAnswers"];
    if (previousAnswers) {
         // Convert it to an array
        previousAnswers = JSON.parse(previousAnswers); 
        document.getElementsByName("{%= CurrentQuestions[1].InputName()%}")[0].innerHTML = previousAnswers.join("|");  
    }
 })
</script>

In this script we take advantage of AskiaScript's CurrentQuestions keyword, introduced in 5.4.6, which lists all questions on screen. We then extract the associated input name with the InputName() method. Now that we have this, we are able to set the value of this box from the localstorage.

The same script will work for any question name without needing amendments.

In this example, the full content of the localstorage will be imported in the variable in an Array, each field separated by a " | " character, which is a way for Design to split the Array thanks to the "use as an array" option. 

2nd screen : saving values into localStorage

In the next screen, we use the following script to save multiple answers into the localstorage:

<script>
document.forms[0].addEventListener("submit", function () {   
    localStorage["previousAnswers"] = JSON.stringify([document.getElementsByName("{%= CurrentQuestions[2].InputName()%}")[0].value , document.getElementsByName("{%= CurrentQuestions[3].InputName()%}")[0].value ]);
});
</script>

Here, we're waiting for the "next" button to be pressed.

{%= CurrentQuestions[2].InputName()%} gives us the place to read the value for the second question on screen (the first being the "description"). 

We're using the JSON.stringify() method to store all data points in a single JSON object that we push in the localstorage thanks to the localStorage[data_index] keyword.

5.3.5 + Version : download here

Since we don't have CurrentQuestions available on this version, you will need to specify explicitly the question name inside the script.

<script>
  document.forms[0].addEventListener("submit", function (){
    localStorage["previousAnswers"] = JSON.stringify([document.getElementsByName("{%= Nom_agent.InputName()%}")[0].value ,  document.getElementsByName("{%= Num_ligne.InputName()%}")[0].value ]);
  });
</script>