Next Page Button Disappear When Using Javascript

Question

Hi Community!I write a Javascript to present a web page of a simulated social media, and capture participants engagement of that web page(comment, share, like….). Everything works well (we ran a successful version in prolific before), but after some twist in the style of the survey, there is an error pop up when click the next page. (I just fixed the next page button problem, now the button occurs, but when I try to click it, there is an error)  Below is the JS I used: Qualtrics.SurveyEngine.addOnload(function () {  var that = this;  // —— Utility function: safely write into JS Embedded Data  function setJS(key, val) {    try {      Qualtrics.SurveyEngine.setJSEmbeddedData(key, val);    } catch (e) {      console.error("setJSEmbeddedData failed:", key, e);    }  }  // —— A) Outer Toast utility (disabled: no prompt will be shown)  var FFToast = { show: function(){} };  function toastOnce(){ /* no-op: disable all toast */ }  // —— 1) Participant ID  var pid = Qualtrics.SurveyEngine.getEmbeddedData('ProlificPID')        || Qualtrics.SurveyEngine.getEmbeddedData('WorkerId')        || Qualtrics.SurveyEngine.getEmbeddedData('ResponseID');  // —— 2) iframe  var iframe = document.createElement('iframe');  iframe.src = 'https://claireyuqingyang.github.io/JPPM_Pilot_All_v3/?pid=' + encodeURIComponent(pid || '');  iframe.style.width = '100%';  iframe.style.height = '650px';  iframe.style.border = '0';  this.getQuestionTextContainer().innerHTML = '';  this.getQuestionTextContainer().appendChild(iframe);  // —— 3) MONITOR CHILD PAGE  var logs = [];  var lastSavedLen = 0;  window.addEventListener('message', function (e) {    var msg = e.data;    if (!msg) return;    if (msg.type === 'ff_log') {      logs.push(msg);      if (msg.action === 'send_comment') {        // Previously this would call toastOnce('...'), now toastOnce is no-op, so no prompt will show        toastOnce('Your comment has been sent.');      }    } else if (msg.type === 'ff_log_bulk' && Array.isArray(msg.payload)) {      var seen = new Set(logs.map(x => (x.ts || '') + '|' + (x.action || '')));      msg.payload.forEach(ev => {        var k = (ev.ts || '') + '|' + (ev.action || '');        if (!seen.has(k)) { logs.push(ev); seen.add(k); }      });      if (msg.payload.some(ev => ev && ev.action === 'send_comment')) {        // Same here, no prompt will show        toastOnce('Your comment has been sent.');      }    }  });  // —— 4) CHILD PAGE dump  function requestDump() {    try { iframe.contentWindow.postMessage({ type: 'ff_request_dump' }, '*'); } catch (e) {}  }  // —— 5) WRITE IN Embedded Data  function saveToEmbedded(reason) {    try {      var compact = logs.map(function(ev) {        var a = ev.action || '';        var d = ev.detail || {};        var rec = {          a: a,          id: d.tweetId || null,          ts: ev.ts || null        };        if ('active' in d) rec.active = !!d.active;        if (a === 'send_comment') {          rec.comment = (d.comment || '').slice(0, 4000);        }        return rec;      });      var json = JSON.stringify({        pid: pid || null,        reason: reason || 'autosave',        t: new Date().toISOString(),        count: compact.length,        actions: compact      });      var CHUNK = 19000;      var i = 1, off = 0;      while (off < json.length) {        setJS('ff_log_json_' + i, json.slice(off, off + CHUNK));        i++; off += CHUNK;      }      var n = i - 1;      setJS('ff_log_json_n', n);      setJS('ff_log_json_len', json.length);      setJS('ff_log_last_saved_ts', new Date().toISOString());      setJS('ff_saved_reason', reason);      setJS('ff_saved_count', String(compact.length));      setJS('ff_saved_at', new Date().toISOString());      lastSavedLen = logs.length;    } catch (e) {      setJS('ff_error', 'save:' + (e && e.message || e));    }  }  // —— 6) request dump first  function requestThenSave(reason) {    requestDump();    setTimeout(function () { saveToEmbedded(reason); }, 200);  }  // Next button  var nextBtn = this.getNextButton && this.getNextButton();  if (nextBtn) {    nextBtn.addEventListener('click', function () {      requestThenSave('next');    }, true);  }  // pagehide & beforeunload  window.addEventListener('pagehide', function () { requestThenSave('pagehide'); });  window.addEventListener('beforeunload', function () { requestThenSave('beforeunload'); });  // —— 7) Heartbeat: every 5 seconds  var autosaveTimer = setInterval(function () {    requestDump();    setTimeout(function () {      if (logs.length !== lastSavedLen) saveToEmbedded('autosave');    }, 120);  }, 5000);  document.addEventListener('visibilitychange', function(){    if (document.visibilityState === 'hidden') { try{ clearInterval(autosaveTimer);}catch(e){} }  });}); Thank you so much!

ClaireYuqingYang · Accepted Answer

Hi, thanks! I fixed myself, that is probably because it was too long of the json, set it lower than 1000(ex. 960, will fix the issue)

AlonsoC · Answer

Thanks ​@ClaireYuqingYangfor confirming the solution!

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded