Styling & UI

Forsta HX Platform - API Scripting Guide

Styling & UI

Custom CSS:

f('AQ1').addClass('highlight');

$('<style>').text(`
    .highlight {
        background: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 15px;
    }
`).appendTo('head');

Progress Bar:

/**
 * updateProgress - Updates a visual progress bar based on answered questions
 * @description Calculates the percentage of visible questions that have been
 *              answered, then updates the progress bar width and text display.
 *              Uses jQuery to find visible questions and filter answered ones.
 */
function updateProgress() {
    // Count total number of visible questions on the page
    var total = $('.question:visible').length;
    var answered = $('.question:visible').filter(function() {
        return $(this).find('input').filter(function() {
            return $(this).val() != '';
        }).length > 0;
    }).length;
    
    var pct = Math.round((answered / total) * 100);
    $('.progress').css('width', pct + '%');
    $('.progress-text').text(pct + '%');
}

$('input').on('change', updateProgress);

Character Counter:

f(AQ1).on('input', function() {
    var max = 500;
    var len = $(this).val().length;
    $(this).next('.counter').remove();
    $(this).after(
        '<div class="counter">' + (max - len) + ' remaining</div>'
    );
});