Qualtrics问卷中时间差（含跨日情况）的JavaScript计算方法-js教程-PHP中文网

Qualtrics问卷中时间差（含跨日情况）的JavaScript计算方法

本教程详细阐述了在Qualtrics问卷中计算两个时间点之间时长的方法，尤其针对跨午夜（例如睡前时间和醒来时间）的情况。文章将介绍如何使用原生JavaScript和Moment.js库精确解析时间输入、处理日期切换逻辑，并最终将计算出的分钟数存储为嵌入式数据，以实现问卷逻辑和数据分析需求。

一、概述与挑战

在qualtrics问卷设计中，经常需要收集受访者的特定时间点信息，例如入睡时间（time to bed）和起床时间（time out of bed）。这些时间通常通过时间选择器（如flatpickr）以“hh:mm am/pm”格式（例如“11:00 pm”和“8:00 am”）录入。核心挑战在于如何准确计算这两个时间点之间的时长（以分钟为单位），特别是当结束时间跨越午夜（即第二天）时。例如，从晚上11点睡到第二天早上8点，简单的时间相减会导致负值或错误结果。本教程将提供两种解决方案：使用原生javascript和利用moment.js库。

二、使用原生JavaScript计算时间差

原生JavaScript提供了Date对象来处理日期和时间。通过巧妙地处理日期部分，我们可以解决跨午夜的时间差计算问题。

1. 获取时间输入

首先，我们需要从Qualtrics问卷中获取受访者输入的时间字符串。这些时间值通常通过嵌入式数据字段或问题文本输入值获取。

Qualtrics.SurveyEngine.addOnReady(function() {
    // 获取开始时间和结束时间的问题值
    // 请将QID4和QID12替换为你的实际问题ID
    var timeToBed = "${q://QID4/ChoiceTextEntryValue}";
    var timeOutOfBed = "${q://QID12/ChoiceTextEntryValue}";

    // ... 后续计算代码
});

登录后复制

2. 时间字符串转换为Date对象

为了进行时间比较和计算，我们需要将字符串格式的时间转换为JavaScript的Date对象。由于我们只关心时间，可以为所有时间点指定一个虚拟的日期（例如“1/1/2000”），这样日期部分就不会干扰时间差的计算。

Qualtrics.SurveyEngine.addOnReady(function() {
    // ... 获取时间输入

    // 创建Date对象。为了正确解析时间，我们添加一个虚拟日期（例如1/1/2000）。
    // JavaScript的Date对象在没有日期信息时，默认会使用当前日期。
    // 为了避免日期影响时间差计算，我们统一使用一个虚拟日期。
    var timeToBedDate = new Date("1/1/2000 " + timeToBed);
    var timeOutOfBedDate = new Date("1/1/2000 " + timeOutOfBed);

    // ... 后续计算代码
});

登录后复制

3. 处理跨午夜情况

这是计算的关键一步。如果结束时间（如早上8点）在开始时间（如晚上11点）之前，则意味着结束时间实际上发生在第二天。在这种情况下，我们需要将结束时间的日期增加一天。

立即学习“Java免费学习笔记（深入）”；

Qualtrics.SurveyEngine.addOnReady(function() {
    // ... 获取时间输入和创建Date对象

    // 检查结束时间是否在开始时间之前，这意味着跨越了午夜
    // 例如，从晚上11点睡到早上8点，如果都在同一天，8点会早于11点
    if (timeOutOfBedDate.getTime() < timeToBedDate.getTime()) {
        // 如果结束时间早于开始时间，则将结束时间的日期增加一天
        timeOutOfBedDate.setDate(timeOutOfBedDate.getDate() + 1);
    }

    // ... 后续计算代码
});

登录后复制

注意： 这里的比较必须是Date对象的时间戳（通过getTime()获取）而不是原始字符串，因为字符串比较“8:00 AM”和“11:00 PM”会得到错误的结果。

4. 计算分钟差并存储结果

Date对象相减会得到毫秒级的差值。我们将其除以1000（转换为秒）再除以60（转换为分钟），即可得到最终结果。最后，将计算出的分钟数存储为Qualtrics的嵌入式数据，以便在问卷流程中或数据导出后使用。

Qualtrics.SurveyEngine.addOnReady(function() {
    // ... 获取时间输入、创建Date对象和处理跨午夜情况

    // 计算时间差（毫秒），然后转换为分钟
    // (结束时间 - 开始时间) / 1000毫秒/秒 / 60秒/分钟
    var timeInBedMinutes = (timeOutOfBedDate.getTime() - timeToBedDate.getTime()) / 1000 / 60;

    // 将计算结果存储为嵌入式数据，以便后续使用或导出
    Qualtrics.SurveyEngine.setEmbeddedData("timeInBed", timeInBedMinutes);

    // 调试用途：在控制台输出结果
    // console.log("入睡时间:", timeToBed);
    // console.log("起床时间:", timeOutOfBed);
    // console.log("入睡Date对象:", timeToBedDate);
    // console.log("起床Date对象 (调整后):", timeOutOfBedDate);
    // console.log("床上时间 (分钟):", timeInBedMinutes);
});

登录后复制

5. 完整原生JavaScript代码示例

将上述步骤整合到Qualtrics的addOnReady事件中：

Qualtrics.SurveyEngine.addOnReady(function() {
    // 获取开始时间和结束时间的问题值
    // 请将QID4和QID12替换为你的实际问题ID
    var timeToBed = "${q://QID4/ChoiceTextEntryValue}";
    var timeOutOfBed = "${q://QID12/ChoiceTextEntryValue}";

    // 创建Date对象。为了正确解析时间，我们添加一个虚拟日期（例如1/1/2000）。
    var timeToBedDate = new Date("1/1/2000 " + timeToBed);
    var timeOutOfBedDate = new Date("1/1/2000 " + timeOutOfBed);

    // 检查结束时间是否在开始时间之前，这意味着跨越了午夜
    if (timeOutOfBedDate.getTime() < timeToBedDate.getTime()) {
        // 如果结束时间早于开始时间，则将结束时间的日期增加一天
        timeOutOfBedDate.setDate(timeOutOfBedDate.getDate() + 1);
    }

    // 计算时间差（毫秒），然后转换为分钟
    var timeInBedMinutes = (timeOutOfBedDate.getTime() - timeToBedDate.getTime()) / 1000 / 60;

    // 将计算结果存储为嵌入式数据
    Qualtrics.SurveyEngine.setEmbeddedData("timeInBed", timeInBedMinutes);

    // 可选：在控制台输出结果进行调试
    // console.log("入睡时间:", timeToBed);
    // console.log("起床时间:", timeOutOfBed);
    // console.log("调整后的起床Date对象:", timeOutOfBedDate);
    // console.log("床上时间 (分钟):", timeInBedMinutes);
});

登录后复制

三、利用Moment.js库简化时间计算

Moment.js是一个流行的JavaScript日期库，它极大地简化了日期和时间的解析、操作和格式化。在Qualtrics中使用Moment.js可以使代码更简洁、可读性更强。

采风问卷

采风问卷是一款全新体验的调查问卷、表单、投票、评测的调研平台，新奇的交互形式，漂亮的作品，让客户眼前一亮，让创作者获得更多的回复。

查看详情

1. 引入Moment.js库

在使用Moment.js之前，你需要在Qualtrics问卷的页眉或问题JavaScript中引入Moment.js库。最简单的方法是通过CDN引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

登录后复制

这段代码应该放在问卷的“Look & Feel” -> “Header”部分，或者在你的JavaScript代码块之前。

2. 使用Moment.js解析时间

Moment.js的moment()函数可以根据指定的格式字符串解析时间。对于“HH:MM AM/PM”格式，我们需要使用“hh:mm A”。

Qualtrics.SurveyEngine.addOnReady(function() {
    // 确保Moment.js库已加载
    if (typeof moment === 'undefined') {
        console.error("Moment.js library is not loaded. Please ensure the script tag is correctly placed.");
        return;
    }

    // 获取开始时间和结束时间的问题值
    var timeToBed = "${q://QID4/ChoiceTextEntryValue}";
    var timeOutOfBed = "${q://QID12/ChoiceTextEntryValue}";

    // 使用Moment.js解析时间字符串
    // "hh:mm A" 是时间字符串的格式，例如 "11:00 PM" 或 "8:00 AM"
    // Moment.js会自动处理AM/PM以及24小时制转换
    var timeToBedMoment = moment(timeToBed, "hh:mm A");
    var timeOutOfBedMoment = moment(timeOutOfBed, "hh:mm A");

    // ... 后续计算代码
});

登录后复制

3. 处理跨午夜情况

Moment.js提供了isBefore()方法来比较两个Moment对象，以及add()方法来增加日期或时间单位，这使得处理跨午夜逻辑非常直观。

Qualtrics.SurveyEngine.addOnReady(function() {
    // ... 获取时间输入和创建Moment对象

    // 检查结束时间是否在开始时间之前（即跨越午夜）
    if (timeOutOfBedMoment.isBefore(timeToBedMoment)) {
        // 如果是，则将结束时间增加一天
        timeOutOfBedMoment.add(1, 'day');
    }

    // ... 后续计算代码
});

登录后复制

4. 计算分钟差并存储结果

Moment.js的diff()函数可以直接计算两个Moment对象之间的差值，并指定返回的单位（如'minutes'）。

Qualtrics.SurveyEngine.addOnReady(function() {
    // ... 获取时间输入、创建Moment对象和处理跨午夜情况

    // 计算两个Moment对象之间的分钟差
    // 第一个参数 'minutes' 指定了要计算的单位
    // 默认不包含小数，如果需要小数，可以添加第三个参数 true
    var timeInBedMinutes = timeOutOfBedMoment.diff(timeToBedMoment, 'minutes');

    // 将计算结果存储为嵌入式数据
    Qualtrics.SurveyEngine.setEmbeddedData("timeInBed", timeInBedMinutes);

    // 调试用途
    // console.log("入睡Moment:", timeToBedMoment.format());
    // console.log("起床Moment (调整后):", timeOutOfBedMoment.format());
    // console.log("床上时间 (分钟):", timeInBedMinutes);
});

登录后复制

5. 完整Moment.js代码示例

将引入脚本和JavaScript代码整合：

<!-- 放在Qualtrics问卷的“Look & Feel” -> “Header”部分 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

<!-- 放在问题JavaScript（addOnReady）中 -->
<script>
Qualtrics.SurveyEngine.addOnReady(function() {
    // 确保Moment.js库已加载
    if (typeof moment === 'undefined') {
        console.error("Moment.js library is not loaded. Please ensure the script tag is correctly placed in the header.");
        return;
    }

    // 获取开始时间和结束时间的问题值
    // 请将QID4和QID12替换为你的实际问题ID
    var timeToBed = "${q://QID4/ChoiceTextEntryValue}";
    var timeOutOfBed = "${q://QID12/ChoiceTextEntryValue}";

    // 使用Moment.js解析时间字符串
    // "hh:mm A" 是时间字符串的格式，例如 "11:00 PM" 或 "8:00 AM"
    var timeToBedMoment = moment(timeToBed, "hh:mm A");
    var timeOutOfBedMoment = moment(timeOutOfBed, "hh:mm A");

    // 检查结束时间是否在开始时间之前（即跨越午夜）
    if (timeOutOfBedMoment.isBefore(timeToBedMoment)) {
        // 如果是，则将结束时间增加一天
        timeOutOfBedMoment.add(1, 'day');
    }

    // 计算两个Moment对象之间的分钟差
    var timeInBedMinutes = timeOutOfBedMoment.diff(timeToBedMoment, 'minutes');

    // 将计算结果存储为嵌入式数据
    Qualtrics.SurveyEngine.setEmbeddedData("timeInBed", timeInBedMinutes);

    // 可选：在控制台输出结果进行调试
    // console.log("入睡Moment:", timeToBedMoment.format());
    // console.log("起床Moment (调整后):", timeOutOfBedMoment.format());
    // console.log("床上时间 (分钟):", timeInBedMinutes);
});
</script>

登录后复制

四、总结与建议

原生JavaScript方法：适用于对外部库有严格限制或项目规模较小的场景。它不依赖外部文件，但代码相对冗长，日期和时间格式处理需要更细致。
Moment.js方法：提供更简洁、可读性更强的API，简化了日期时间操作。尤其在处理复杂日期逻辑和多种格式时，其优势更为明显。缺点是需要引入外部库，可能会略微增加页面加载时间。
放置位置：所有JavaScript代码都应放置在Qualtrics问题编辑器的JavaScript部分，并确保在Qualtrics.SurveyEngine.addOnReady(function(){ ... });块内执行，以保证在页面完全加载并准备好交互时运行。
QID替换：务必将示例代码中的QID4和QID12替换为你问卷中实际的时间输入问题ID。
测试：在部署到正式问卷之前，务必在预览模式下对不同时间组合（包括跨午夜和不跨午夜的情况）进行充分测试，确保计算结果的准确性。
时区考虑：上述方法主要基于本地时间进行计算。如果你的问卷涉及到跨时区的受访者，并且需要精确到特定时区的时间差，可能需要进一步考虑时区转换，Moment.js也提供了相应的时区插件来处理这类复杂场景。