#jspsych-survey-html-form {
  position: relative;
  top: 20vh;
  left: 0vw;
}

#jspsych-survey-html-form-next {
  visibility: hidden;
}

const jsPsych = initJsPsych({
  on_finish: function () {
    jsPsych.data.displayData();
  }
});
const wordList = ["りんご", "ごりら", "らっぱ", "ぱんだ", "だんご", "ごぼう"];

// Instruction -------------------------------------------------------------
const trialInst = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: "スペースキーを押すと課題が始まります",
  choices: [" "]
};

// Encoding phase ----------------------------------------------------------
// timeline_variablesの作成
let encodingVars = [];
for (let i = 0; i < wordList.length; i++) {
  encodingVars.push({ word: wordList[i] });
}

const trialEncoding = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: jsPsych.timelineVariable("word"),
  trial_duration: 1000,
  choices: "NO_KEYS"
};

const blockEncoding = {
  timeline: [trialEncoding],
  timeline_variables: encodingVars,
  sample: {
    type: "fixed-repetitions",
    size: 1
  }
};

// Test phase --------------------------------------------------------------
let wordPosList = [
  // 'style="position: absolute; left: 50vw; top: 50vh";', // center
  'style="position: absolute; left: 40vw; top: 35vh";', // mid-left
  'style="position: absolute; left: 60vw; top: 35vh";', // mid-right
  'style="position: absolute; left: 45vw; top: 21.34vh";', // top-left
  'style="position: absolute; left: 55vw; top: 21.34vh";', // top-right
  'style="position: absolute; left: 45vw; top: 48.66vh";', // bottom-left
  'style="position: absolute; left: 55vw; top: 48.66vh";' // bottom-right
];

let curPos = 1;

function fillVal(clickElement) {
  clickElement.style.visibility = "hidden";
  document.getElementById(`${curPos}`).value = clickElement.innerHTML;
  if (curPos < wordList.length) {
    curPos++;
  } else {
    curPos = 1; // reset
    document.getElementById("jspsych-survey-html-form-next").style.visibility =
      "visible";
  }
}
function makePreamble() {
  const shuffled = jsPsych.randomization.shuffle(wordList);
  let htmlWordList = [];
  for (let i = 0; i < shuffled.length; i++) {
    let htmlWord = `<div ${wordPosList[i]}><span onClick="fillVal(this)">${shuffled[i]}</span></div>`;
    htmlWordList.push(htmlWord);
  }
  return `<div>${htmlWordList.join("")}</div>`;
}

function makeInputBox() {
  let inputBoxList = [];
  for (let i = 0; i < wordList.length; i++) {
    let inputBox = `<input id="${i + 1}" name="${
      i + 1
    }" type="text" size="5" value="${i + 1}" readonly/>`;
    inputBoxList.push(inputBox);
  }
  const alinedInputBox = inputBoxList.join("&emsp;");
  return `<p>${alinedInputBox}</p>`;
}

const trialReconstruction = {
  type: jsPsychSurveyHtmlForm,
  preamble: makePreamble,
  html: makeInputBox
};

const task = {
  timeline: [blockEncoding, trialReconstruction],
  repetitions: 3
};

jsPsych.run([trialInst, task]);