Qualtrics中记录页面导航前后选项点击顺序的技术问询

Got it, let's solve this Qualtrics tracking problem—you need to log every option click (including unchecks), plus flag when a user navigates back to the page and proceeds. Here’s a step-by-step solution that’ll generate that 1|3|4|back|5|4|next style log you’re aiming for:

Step 1: Set Up Embedded Data Fields #

First, you need two embedded data fields to store tracking info:

• ClickLog: This will hold the full sequence of clicks, back navigation, and next action.
• IsReturnToPage: A temporary flag to detect when the user returns to the page after navigating away.

Add these in your Survey Flow (before the target question page) so Qualtrics initializes them properly.

Step 2: Add Custom JavaScript to Your Question Page #

Paste this code into the JavaScript editor of your target question (click the gear icon > Add JavaScript). I’ve commented each section to explain what it does:

Qualtrics.SurveyEngine.addOnPageLoad(function() {
    // Initialize the click log if it's empty
    if (!Qualtrics.SurveyEngine.getEmbeddedData('ClickLog')) {
        Qualtrics.SurveyEngine.setEmbeddedData('ClickLog', '');
    }

    // Check if user is returning to this page (after clicking back from a later page)
    const isReturnVisit = Qualtrics.SurveyEngine.getEmbeddedData('IsReturnToPage');
    if (isReturnVisit === 'true') {
        // Append 'back' to the log to mark the return
        let currentLog = Qualtrics.SurveyEngine.getEmbeddedData('ClickLog');
        currentLog = currentLog ? `${currentLog}|back` : 'back';
        Qualtrics.SurveyEngine.setEmbeddedData('ClickLog', currentLog);
        // Reset the flag so it doesn't trigger again if the user stays on the page
        Qualtrics.SurveyEngine.setEmbeddedData('IsReturnToPage', 'false');
    } else {
        // Set the return flag to false for initial page load
        Qualtrics.SurveyEngine.setEmbeddedData('IsReturnToPage', 'false');
    }

    // Handle clicks on survey options
    function logOptionClick(e) {
        // Extract the option number from the input's ID (adjust regex if your IDs differ)
        const optionNumber = e.target.id.match(/\d+/)[0];
        let currentLog = Qualtrics.SurveyEngine.getEmbeddedData('ClickLog');
        // Append the option number to the log (add a '-' prefix if you want to mark unchecks)
        currentLog = currentLog ? `${currentLog}|${optionNumber}` : optionNumber;
        Qualtrics.SurveyEngine.setEmbeddedData('ClickLog', currentLog);
    }

    // Attach click listeners to all option inputs (adjust selector for your question type)
    // Use '.Matrix input' for matrix questions, '.Choice input' for multiple choice, etc.
    document.querySelectorAll('.Choice input').forEach(input => {
        input.addEventListener('click', logOptionClick);
    });

    // Handle back button click: set the return flag so we log 'back' when user returns
    document.querySelector('.PreviousButton').addEventListener('click', () => {
        Qualtrics.SurveyEngine.setEmbeddedData('IsReturnToPage', 'true');
    });

    // Handle next button click: append 'next' to the log before navigating
    document.querySelector('.NextButton').addEventListener('click', () => {
        let currentLog = Qualtrics.SurveyEngine.getEmbeddedData('ClickLog');
        currentLog = currentLog ? `${currentLog}|next` : 'next';
        Qualtrics.SurveyEngine.setEmbeddedData('ClickLog', currentLog);
    });
});

Key Adjustments & Notes #

• Selector Tweaks: If you’re using a matrix question instead of multiple choice, replace .Choice input with .Matrix input to target the correct elements.
• Distinguish Checks/Unchecks: To make the log clearer, modify the logOptionClick function to mark unchecks with a minus sign:

  const action = e.target.checked ? optionNumber : `-${optionNumber}`;
  currentLog = currentLog ? `${currentLog}|${action}` : action;
  

  This would change your example log to 1|3|4|back|5|-4|next, making it obvious when an option was unchecked.
• Testing: Always test in Qualtrics Preview mode first—you can view the embedded data values in the preview sidebar to verify the log is updating correctly.
• Survey Flow Order: Make sure your embedded data fields are placed before the question page in the Survey Flow, otherwise the code won’t be able to access them initially.

This setup will capture exactly the sequence you want: initial clicks, a back marker when the user returns to the page, subsequent clicks, and a next marker when they proceed.

内容的提问来源于stack exchange，提问作者Joed Lynch