adding countdown to Prolific redirect after trial completion if Proli…

…fic completion code is populated as env var (#45)

template/experiment-ui/pages.js

@@ -2,13 +2,30 @@
  * This is the end page that is shown after the experiment
  */
 function endPage() {
-    let link = ''
-    if (process.env.REACT_APP_redirect !== '') {
-        link = `<a href="${process.env.REACT_APP_redirect}">Back to prolific</a>`
+    let link = '';
+    let atag = '';
+     let interval;
+    // the value compared below is hardcoded in the .env file produced by Copier
+    // if you modify the value in the .env file or your env vars to a completion code provided by Prolific
+    // a link will be presented to users that redirects to Prolific with the completion code populating
+    // a query string parameter
+    if (process.env.NODE_APP_completionCode !== 'ABCD1234') {
+        link = 'https://app.prolific.com/submission/complete?cc=${process.env.NODE_APP_completionCode}';
+        let countdown = 5;
+        atag = `<a href=>Click here to redirect to Prolific.</a> You will be redirected automatically in <span id="countdown">${countdown}</span> seconds...`;
+        interval = setInterval(() => {
+            countdown -= 1;
+            document.getElementById('countdown').innerText = countdown;
+    }, 1000);
+
+        setTimeout(() => {
+            clearInterval(interval);
+            window.location.href = link;
+        }, 5000);
     }
-    let html = `<div class="msg">Thank you for participating in our experiment.<br/>${link}</div>`
+    let html = `<div class="msg">Thank you for participating in our experiment.<br/>${atag}</div>`;
 
-    document.body.innerHTML = html
+    document.body.innerHTML = html;
 }
 
 function waitPage() {