Skip to main content

FV Kinesis Support

All the topics, resources needed for FV Kinesis.

FocusVision Knowledge Base

Text Highlighter Example

Text Highlighter Exercise

  1. Create a new survey.
  2. Create a new Extra Text question that contains the question displayed for your Text Highlighter exercise. No page break is needed on this question.
  3. Create one 'Number' question type for each phrase you want to include in this exercise. The question text for each of these number questions should be each individual phrase. No page breaks should be placed except for on the very last number question of the exercise, if desired.
  4. After creating your phrase/number questions, select the first number question's checkbox and the last number question's checkbox. Then select Custom HTML Range on the left menu in the Survey Editor.
  5. Once in the custom html range editor, click on the 'HTML' icon in the editor toolbar. Then copy the script below and paste its entirety at the beginning of the HTML editor window.
  6. Click 'Update', then click 'Save.'
  7. Your Text Highlighter exercise is complete!
     
<!--  No edits are required for this script as it is meant to be completely automated.
		This entire script should be appended to the beginning of your HTML Range with your pre-existing question fields following. 
--> 

<!-- JAVASCRIPT START -->
<script type="text/javascript">// <![CDATA[

$('head').eq(0).append('<link rel="stylesheet" type="text/css" href="https://demo.futuremr.com/survey/files/134/textHighlighter.css" />');

$(document).ready(function () {

    // Grab each question name and change their type, value, and assign an id.
    var allQNames = $('[name^="Q"]');

    for (a = 0; a < allQNames.length; a++) {
        allQNames[a].type = 'hidden';
        allQNames[a].value = '0';
        allQNames[a].id = a + 1;
    }

    for (b = 0; b < allQNames.length; b++) {
        $('[name^="Q"]').eq(b).next('br').remove();
        $('[name^="Q"]').eq(b).next('br').remove();
    }

// Controls the highlights of phrases and their span tags.
    this.clickEvent = function (s) {
        var id = s.id;

        if (s.className === 'default') {
            s.className = 'clickedOnce';
            document.getElementsByName(id)[0].value = '1';
        }
        else if (s.className === 'clickedOnce') {
            s.className = 'clickedTwice';
            document.getElementsByName(id)[0].value = '-1';
        }
        else {
            s.className = 'default';
            document.getElementsByName(id)[0].value = '0';
        }
    }
    // Stores and hides the td text values of each question text provided.

    var getValues = $('.questiontext');
    var accValues = [];

    $.each(getValues, function (i, v) {
        accValues.splice(0, 0, $(v).html());
    });

    accValues.reverse();
    console.log(accValues);
    console.log(accValues.length);

    // Creates the div container for phrase content and specifies its styles.
    var phTable = document.createElement('table');
    phTable.className = "questiontexttable";
    var phDiv = document.createElement('div');
    phDiv.style.border = '1px';
    phDiv.style.borderStyle = 'dashed';
    phDiv.style.width = '95%';
    phDiv.style.padding = '10px';

    setTimeout(function () {
        for (var x = 1; x <= accValues.length; x++) {
            if (accValues[x - 1].match(/\?lb/) == "?lb") {
                if (accValues[x - 1]) {
                    phDiv.innerHTML += '<span class="default" id="' + allQNames.eq(x - 1).attr('name') + '" onclick="javascript:clickEvent(this)">' + accValues[x - 1].replace("?lb", "") + '</span><br><br>';
                }
            }
            else {
                phDiv.innerHTML += '<span class="default" id="' + allQNames.eq(x - 1).attr('name') + '" onclick="javascript:clickEvent(this)">' + accValues[x - 1] + '</span>' + ' ';
            }
        }
    }, 100);

    if ($('.questiontexttable')[0].insertBefore(phTable, $('.questiontexttable')[0].firstChild)) {
        for (a = 1; a < allQNames.length; a++) {
            var qTColl = document.getElementsByClassName('questiontexttable');
            var qTable = Array.prototype.slice.call(qTColl, 0);

            for (x = 1; x < qTable.length; x++) {
                qTable[x].parentNode.removeChild(qTable[x]);
            }
        }
        $('.questiontexttable').eq(0).html(phDiv);

        var crtReset = document.createElement('div');
        crtReset.style.textAlign = "right";
        crtReset.innerHTML = '<a href="javascript:void(0)" onclick="javascript:resetSelections()">Please click here to reset your selections.</a>';

        $('.questiontexttable').eq(0).append(crtReset);
    }

});

// Resets highlighted selection when called.
function resetSelections() {
    var onceSpansColl = document.getElementsByClassName('clickedOnce');
    var twiceSpansColl = document.getElementsByClassName('clickedTwice');
    var onceSpans = Array.prototype.slice.call(onceSpansColl);
    var twiceSpans = Array.prototype.slice.call(twiceSpansColl);

    var allQuestionsColl = document.getElementsByTagName('input');
    var allQuestions = Array.prototype.slice.call(allQuestionsColl);

    for (var a = 0; a < allQuestions.length; a++) {
        if (allQuestions[a].id >= 1 && allQuestions[a].id <= allQuestions.length) {
            allQuestions[a].value = "0";
        }
    }

    for (var x = 0; x < onceSpans.length; x++) {
        onceSpans[x].className
            = 'default';
    }
    for (var y = 0; y < twiceSpans.length; y++) {
        twiceSpans[y].className = 'default';
    }
}

// ]]></script>
<!-- JAVASCRIPT END -->
  • Was this article helpful?