Reply To: Randomizing trials, with 1/5 of trials followed by a comprehension question

[Jeremy]

Hi,

1+3) You’ll need to split row.context at each <br> so you get a list of each line separately, so you can print one line on the page then use a Key element to wait for a keypress, then print the next line, wait for a keypress again, etc. If you want an alignment like you describe, you’ll need to use a table HTML element, which is not directly implemented as a PennController element, so you’ll need to use javascript to inject it in the page:

newKey("next", " ")
,
newText("context", "").print()
,
...row.context.split("
").map( line => [
    newFunction(()=>{
        const tableRow = document.createElement("tr");
        const speaker = document.createElement("td");
        const speech = document.createElement("td");
        speaker.innerText = line.replace(/^([^:]+:).+$/,"$1").replace(/\n/gi,'');
        speech.innerText = line.replace(/^[^:]+:/,"").replace(/\n/gi,'');
        tableRow.append(speaker);
        tableRow.append(speech);
        document.querySelector("#context").append(tableRow);
    }).call()
    ,
    getKey("next").wait()
] ).flat()

2) You can add custom CSS to control visual rendering. In the case of the piece of code above, I’d suggest you target the table with something like this in global_z.css:

table#context tr {
  padding-bottom: 0.5em;
}
table#context tr td {
  padding-right: 0.5em;
}

Jeremy