Final page redirection in Qualtrics

gistfile1.js

/*

MIT License

Copyright (c) 2018 PERTS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/

(function () {
    'use strict';

    // # Qualtrics End-of-Survey Redirection Script
    //
    // This script aids in directing users to another website at the end
    // of a Qualtrics survey, with two important features:
    //
    // * A dynamic embedded variable is added to the exit link.
    // * The Qualtrics survey is still submitted and marked as complete
    //   even though the user leaves before reaching the final
    //   submission step.
    //
    // ## Before Using This Code
    //
    // * Your embedded data variable must be set in the survey flow.
    // * This script should be added to a question which is the only
    //   question on the last page of the survey.
    // * The question text should NOT suggest that the user has completed
    //   the survey. Rather it should encourage them to click a link
    //   ("anchor" or <a> tag) written into the question. Paste this code
    //   via the HTML View of the question:
    //
    //       <a id="redirect-link" href="#">Click here to continue</a>
    //
    // * Make sure you have configured the variables below correctly.
    // * Make sure you test the behavior of this page after configuration.

    // ** CONFIGURE BEHAVIOR HERE ** //

    // Where the user will go when they click the link.
    // Must begin with http:// or https://
    var redirectUrl = 'https://www.random.org';

    // The embedded data variable name of the user identification token, e.g.
    // 'token' or 'user_id', or somesuch. Change the characters test_variable
    // to the name of your variable in both of the following.
    // EXAMPLE:
    // var variableName = 'user_id';
    // var embeddedData = '${e://Field/user_id}';
    var variableName = 'test_variable';
    var embeddedData = '${e://Field/test_variable}';

    // ** END OF CONFIGURATION ** //





    // ** DO NOT EDIT THE FOLOWING CODE ** //

    // N.B. The $ in the following code is Prototype.js, NOT jQuery.
    // Qualtrics includes prototype by default.

    // How long the Qualtrics page in the background will wait before
    // submitting the survey, in seconds.
    var submitDelay = 5;

    // The id of the link (<a> tag) in the question text which users will
    // click.
    var linkId = 'redirect-link';

    if (!embeddedData || embeddedData.indexOf('{e://Field/') !== -1) {
        throw new Error("Embedded datum " + variableName + " not found.");
    }

    Qualtrics.SurveyEngine.addOnload(function () {
        // Apply some styling: hide Qualtrics' next/prev buttons, and make
        // our button look pretty.
        $('Buttons').setStyle({display: 'none'});
        $(linkId).setStyle({
            "display": "block",
            "margin": "30px auto 45px auto",
            "boxShadow": "none",
            "backgroundColor": "#3faeec",
            "width": "300px",
            "padding": "12px 3px",
            "fontSize": "18px",
            "color": "#fff",
            "webkitBorderRadius": "5px",
            "mozBorderRadius": "5px",
            "khtmlBorderRadius": "5px",
            "borderRadius": "5px",
            "border": "0px solid",
            "textAlign": "center",
            "textDecoration": "none",
            "fontWeight": "300",
            "fontStyle": "normal",
            "webkitBoxSizing": "border-box",
            "mozBoxSizing": "border-box",
            "msBoxSizing": "border-box",
            "boxSizing": "border-box",
            "fontFamily": "Arial, sans-serif",
            "cursor": "pointer"
        });

        // This "parser" is really just a native feature of the DOM.
        var redirectParser = document.createElement('a');
        redirectParser.href = redirectUrl;

        // The functions toQueryParams/String are provided by Prototype JS.
        // Parse the parameters in the existing query string, then add or
        // overwrite the configured variable by modifying the queryParams
        // object, converting it back into a string, and saving it to the
        // "parser"/anchor.
        // This takes care of numerous gotchas, like (de/en)codeURIComponent,
        // presence of hashes/fragments, etc.
        var queryParams = redirectParser.search.toQueryParams();
        queryParams[variableName] = embeddedData;
        redirectParser.search = Object.toQueryString(queryParams);

        var finalUrl = redirectParser.href;

        // Point the anchor tag at the right URL and
        // make sure the anchor tag opens a new window/tab.
        $(linkId).writeAttribute('href', finalUrl)
                 .writeAttribute('target', '_blank');

        // Have the Qualtrics page submit the survey AFTER the user has moved
        // on in another tab.
        $(linkId).on('click', function (event, target) {
            setTimeout(function () {
                Qualtrics.SurveyEngine.navClick(undefined, 'NextButton');
            }, submitDelay * 1000);

            // Hide the link to avoid multiple submissions.
            $(linkId).hide();
        });
    });
}());