Survey Page - Done

view live example https //temp to create standalone page webflow\ io/ description this document provides comprehensive technical details for building the pulsecheck end user survey page the page is designed to collect user feedback via a survey that includes both area questions and a referral (nps) question this documentation covers the html structure, css dependencies, javascript functionalities, data storage considerations, and multi language support 1\ overview & purpose purpose the pulsecheck survey page is the end user interface for collecting feedback respondents complete the survey by selecting options for area questions and providing an nps score at the end key features area questions up to 10 questions with 4 possible choices (positive, neutral, negative, not applicable) and an optional comment field referral question (nps) a numeric scale (0–10) asking how likely the user is to recommend the service real time data storage each answer and comment is stored immediately (on click) to allow resuming an incomplete survey conditional elements elements like the powered by badge can be conditionally rendered based on the user's plan multi language support enables automatic language detection and switching, including translation of dynamic page elements 2\ page structure & components 2 1 area questions layout question text displayed in an element with class pulsecheck question text response options four choices represented by icons positive (happy face) neutral (meh face) negative (sad face) not applicable (circle with dash) comment field a \<textarea> (with a maxlength of 5000 characters) for additional user input functionality each question includes a hidden input that stores the selected option the chosen option is stored using the data pulse attribute if "not applicable" is selected, a specific element ( pulsecheck question na ) is toggled to display accordingly scoring refer to external documentation (" docid\ v8xwkhn2y2afv1r0ztwcw ") for how scores are computed from these responses design options we will offer the option of different icon sets for the smileys which can be picked in pulsecheck settings 2 2 referral question (nps) layout the referral question asks "how likely are you to recommend us to a friend or colleague?" options range numerically from 0 to 10 two legend labels clarify the scale 0 = not likely at all 10 = extremely likely functionality a hidden input named referral score is used to store the selected score each referral option has a data referral score attribute, and a click event updates the hidden input accordingly 2 3 conditional elements powered by badge displayed by default at the bottom of the page for pro plan users, the badge can be disabled via settings if disable, don't just hide, omit to save bandwidth when multi language support is active, the badge text is automatically translated multi language support dropdown include only if multi language support is enabled allows users to select their preferred language translation script automatically detects the browser’s language and swaps text in key elements pulsecheck specific translations elements such as \<h1 id="title"> , \<p id="welcome"> , and each question’s text ( pulsecheck question text ) require dynamic text replacement from server provided translations 2 4 hand off / post to thank you page on clicking the "complete" button, the form is submitted and the user is redirected to a thank you page if the language was changed via the dropdown, the selected iso language code (e g , ?language=en ) needs to be appended to the url to ensure consistency on the thank you page 2 5 on page variables for the page, {workspace name} should be the name of the workspace however we will have an override in settings if overridden use that there are locations in the base html that contain the variable {workspace name}, this should be replaced with the workspace's name when the page is loaded set the variable window\ workspacename to the name of the workspace window\ workspacename = "acme corp" 3\ data storage & persistence 3 1 storing survey results raw data save all raw responses (selected options and comments) to the database do not store only calculated scores; the original responses must be preserved for display and auditing purposes real time saving each time an option is clicked, the corresponding response is sent to the server on page load, previously stored responses should be reselected to allow users to resume their survey 3 2 storing comments association each comment is stored in a way that it can be associated with its specific question filtering the storage design should allow easy listing and filtering of comments for later analysis 4\ html & css structure 4 1 html requirements stand alone page the page is self contained and optimized for fast loading no external libraries like jquery or webflow’s javascript/css are required key html elements \<head> includes meta tags (charset, viewport, description) links to css files ( css/normalize css and css/pulsecheck css ) favicon and apple touch icon inline \<style> for specific adjustments (e g , aspect ratio for referral options) a script that defines window\ workspacename for dynamic replacement in text \<body> includes a main container ( pulsecheck container ) wrapping all survey elements an optional language dropdown ( pulsecheck language dropdown ) the company logo survey title ( \<h1 id="title"> ) and welcome paragraph ( \<p id="welcome"> ) a form ( \<form id="pulsecheck form"> ) containing area question blocks the referral question block hidden inputs for storing answers a "complete" button for submission the powered by badge 4 2 css dependencies files css/normalize css – ensures consistent styling across browsers css/pulsecheck css – contains custom styles specific to the pulsecheck page notes the page’s css is self contained, reducing reliance on external style libraries 5\ javascript functionality 5 1 survey options interactivity initialization on domcontentloaded , iterate over each pulsecheck question options container for each container, a hidden input is created to store the selected option area question options event listener each pulsecheck question option receives a click event on click remove the selected class from all sibling options add the selected class to the clicked option retrieve the value from the data pulse attribute (converted to lowercase) and store it in the hidden input toggle the display of the pulsecheck question na element if the "not applicable" option is selected referral question options initialization identify the referral container ( referral question container ) create a hidden input named referral score event listener each referral option ( referral question option ) has a click event that removes the selected class from all referral options adds the selected class to the clicked option updates the hidden input with the value from the data referral score attribute 5 2 multi language & translation language dropdown rendered only if multi language support is enabled on the pulsecheck allows users to switch languages, with the selected language displayed (e g , via the #selectedlanguage element) translation script automatically detects the browser’s language dynamically updates text for page title, meta description, textarea placeholder, complete button referral question legend labels powered by badge text replaces {workspace name} with the actual workspace name provided via window\ workspacename passing language on submission if a language is selected via the dropdown, the iso language code (e g , en ) needs to be appended to the thank you page url const currentlang = window\ pulsechecklanguage code; // append ?language=currentlang to the redirect url 6\ integration & performance considerations stand alone & lightweight the page is designed to load quickly with minimal dependencies images are loaded lazily (using loading="lazy" ) bandwidth optimization conditional elements (e g , powered by badge) are loaded only if required data persistence utilize ajax or similar techniques to save survey responses on click ensure previously saved responses are pre populated on page load for a seamless user experience 7\ file structure & deployment files & directories html – main html file css/normalize css – reset/normalize css file css/pulsecheck css – custom styles for the pulsecheck page images/ – contains favicon, logos, and other image assets js/ – (optional) directory for additional javascript files https //github com/leevaniderstine/360pulse/blob/main/pulsecheck language js server side integration endpoints to store survey responses and comments api endpoints to retrieve server provided translations and customizable pulsecheck content deployment the page is intended to be a standalone page configure appropriate cache headers and compression to ensure optimal performance html help us improve | {workspace name} feedback english english tell us how we're doing at happier it, we’re committed to delivering exceptional it services and support that empower your business your insights help us understand what we’re doing well and where we can improve please take a few moments to share your feedback regarding our helpdesk, onsite support, proactiveness, leadership, and more thank you for helping us continually enhance our services to better serve you how satisfied are you with the speed at which our helpdesk team responds to your requests? not applicable how likely are you to recommend us to a friend or colleague? 0 = not likely at all 10 = extremely likely 0 1 2 3 4 5 6 7 8 9 10 complete powered by try it free