PCIbex Farm中JS实验代码：log()存储数据时卡住问题求助

问题背景 #

作为JS新手，在使用PCIbex Farm开发文本输入类实验时遇到问题：代码从CSV读取题目，要求用户输入不少于8字符的内容，按回车进入下一题。当前仅能通过console.log()输出数据到控制台，无法保存到实验日志；尝试使用PCIbex的log()方法时，实验卡在第一题，resolve函数未被正常调用。

原代码 #

Template("Poodle-items.csv", row =>
  newTrial("experimental-trial",
    newHtml("content",
      `<div style="display: inline-block;">
        <input type="text" id="sentence" name="sentence" style="width: 200px; height: 20px;">
      </div>
      <div style="display: inline-block;">
        <p>${row.sentence}</p>
      </div>
      <div id="errorMessage"></div>`
    )
    .print(),

    newFunction(() => {
      const sentenceInput = document.getElementById("sentence");
      const errorMessage = document.getElementById("errorMessage");

      let errorMessageDisplayed = false;
      let resolveFunction;

      sentenceInput.addEventListener("keyup", function(event) {
        if (event.key === "Enter") {
          if (sentenceInput.value.length < 8 && !errorMessageDisplayed) {
            const errorText = document.createElement("p");
            errorText.textContent = "Please write a longer answer!";
            errorText.classList.add("errorMessage");
            errorMessage.appendChild(errorText);
            errorMessageDisplayed = true;
          } else if (sentenceInput.value.length >= 8) {
            errorMessage.innerHTML = ""; // Clear previous error message

            // Log the data
            const dataToSave = `sentence: ${sentenceInput.value}\ngroup: ${row.group}\nconjunction: ${row.conjunction}\ndegree: ${row.so}\nID: ${getVar("ID")}\n\n`;
            resolveFunction();
            console.log(dataToSave);
          }
        }
      });

      return new Promise(resolve => {
        resolveFunction = resolve;
      })
;
    })
    .call()
  )
);

解决方案 #

核心问题分析 #

PCIbex的log()是异步操作，不能直接在newFunction内部的回调中调用，否则会打乱Trial的异步流程，导致resolve无法正常触发。需要将数据存储到实验变量中，在newFunction完成后统一调用log()。

修正步骤 #

1. 存储实验数据到变量：在验证通过后，用setVar()将输入内容和CSV行数据存入实验变量，而非直接拼接字符串。
2. 在Trial流程中调用log()：在newFunction的call()之后，添加log()方法，读取之前存储的变量并记录。
3. 清理事件监听：避免重复绑定事件，在触发resolve后移除键盘监听。

修正后的代码 #

Template("Poodle-items.csv", row =>
  newTrial("experimental-trial",
    newHtml("content",
      `<div style="display: inline-block;">
        <input type="text" id="sentence" name="sentence" style="width: 200px; height: 20px;">
      </div>
      <div style="display: inline-block;">
        <p>${row.sentence}</p>
      </div>
      <div id="errorMessage"></div>`
    )
    .print(),

    newFunction((row) => {
      const sentenceInput = document.getElementById("sentence");
      const errorMessage = document.getElementById("errorMessage");
      let errorMessageDisplayed = false;

      return new Promise(resolve => {
        const handleKeyUp = function(event) {
          if (event.key === "Enter") {
            if (sentenceInput.value.length < 8 && !errorMessageDisplayed) {
              const errorText = document.createElement("p");
              errorText.textContent = "Please write a longer answer!";
              errorText.classList.add("errorMessage");
              errorMessage.appendChild(errorText);
              errorMessageDisplayed = true;
            } else if (sentenceInput.value.length >= 8) {
              errorMessage.innerHTML = "";
              // 存储数据到实验变量
              setVar("userSentence", sentenceInput.value);
              setVar("group", row.group);
              setVar("conjunction", row.conjunction);
              setVar("degree", row.so);
              // 移除事件监听
              sentenceInput.removeEventListener("keyup", handleKeyUp);
              // 触发resolve
              resolve();
            }
          }
        };
        sentenceInput.addEventListener("keyup", handleKeyUp);
      });
    }, row) // 传递row参数到Function内部
    .call(),

    // 统一记录日志
    newLog("trial-results")
      .log("ID", getVar("ID"))
      .log("userSentence", getVar("userSentence"))
      .log("group", getVar("group"))
      .log("conjunction", getVar("conjunction"))
      .log("degree", getVar("degree"))
      .log("originalSentence", row.sentence)
      .send()
  )
);

关键修改说明 #

• 将row作为参数传递给newFunction，确保内部能访问CSV行数据。
• 用setVar()存储需要记录的数据，方便后续log()调用读取。
• 在验证通过后移除键盘事件监听，避免同一输入框重复触发事件。
• 使用newLog()创建日志条目，逐个记录字段，导出的日志会是结构化表格格式，更方便后续处理。

内容的提问来源于stack exchange，提问作者balla-a