Hi,
There are multiple things at play here, but a crucial one is that print and unfold will add content to a new line each time, so you won’t be able to get everything on a single line using those commands
To really have the input box in the same stream as the surrounding text, ideally it needs to be contained in a simple span HTML element surrounded with textNode elements
Because you won’t be able to use the PennController command unfold, you will need to come up with a custom function that does the job of dynamically revealing the content of a span element. This is one such function, which you can place at the top of your script for example:
function unfold(element,duration) {
class TextNode {
constructor(original){
this.original = original;
this.replacer = document.createElement("SPAN");
this.replacer.style.visibility='hidden';
this.replacer.textContent = this.original.textContent;
this.original.replaceWith(this.replacer);
}
unfold(n) {
if (n>=this.original.length) return this.replacer.replaceWith(this.original);
[...this.replacer.childNodes].forEach(n=>n.remove());
this.replacer.style.visibility = 'visible';
const vis = document.createTextNode(this.original.textContent.substring(0,n));
const hid = document.createElement("SPAN");
hid.style.visibility = 'hidden';
hid.innerText = this.original.textContent.substring(n);
this.replacer.append(vis);
this.replacer.append(hid);
}
}
let toUnfold = (function buildArray(el){
const ar = [];
if (el.childNodes.length>0) {
for (let i=0; i<el.childNodes.length; i++)
ar.push(...buildArray(el.childNodes[i],duration,'hold'));
}
else if (el.nodeName=="#text")
ar.push(new TextNode(el));
else if (el.style.visibility!="hidden") {
el.style.visibility='hidden';
ar.push(el);
}
return ar;
})(element);
let totalChar = 0;
toUnfold = toUnfold.map(e=>{
const n = e instanceof TextNode ? e.original.length : 1;
totalChar += n;
return {element: e, len: n, total: totalChar};
});
const perChar = duration / totalChar;
let startTime;
return new Promise(r=> {
const updateUnfold = timestamp => {
if (startTime===undefined) startTime = timestamp;
const elapsed = timestamp-startTime, progress = elapsed/perChar;
if (elapsed >= duration) {
toUnfold.forEach( e=>e.element instanceof TextNode ? e.element.unfold(e.len+1) : e.element.style.visibility='visible' );
r();
}
else {
let total = 0;
toUnfold.find(e=>{
const lastToReveal = progress < e.total;
if (e.element instanceof TextNode) e.element.unfold(lastToReveal ? progress-total : progress);
else e.element.style.visibility = 'visible';
total += e.len;
return lastToReveal;
});
window.requestAnimationFrame(updateUnfold);
}
};
window.requestAnimationFrame(updateUnfold);
});
}
Then integrating it inside a trial is pretty easy:
newTextInput("filledInBlank")
.size("6em", "1.5em")
.lines(1)
.css({
"outline": "none",
"resize": "none",
"border": "0",
"padding": "0",
"margin": "0",
"margin-left": "1ex",
"margin-right": "1ex",
"vertical-align": "-.33em",
"background-color": "white",
"border-bottom": "2px solid black",
"display": "inline"
})
.cssContainer({"display": "inline", "font-size": "16px"})
.print()
,
newFunction( async ()=> {
const answer = document.querySelector("textarea.PennController-filledInBlank");
const container = document.createElement("SPAN");
answer.replaceWith(container);
const before = document.createTextNode( row.before_blank );
const after = document.createTextNode( row.after_blank );
container.append(before);
container.append(answer);
container.append(after);
await unfold(container, parseInt(row.time_before)+parseInt(row.time_after) );
}).call()
,
newButton("moveOn", "Continue")
.right()
.print()
.wait()
Jeremy