Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.

Commit f82e939

Browse files
zihan21206zihan21206
committed
🔊 Add logs for moving horizontal parsons blocks.
1 parent eef9d87 commit f82e939

File tree

2 files changed

+45
-243
lines changed

2 files changed

+45
-243
lines changed

‎runestone/hparsons/js/horizontal-parsons.js‎

Lines changed: 33 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -3082,14 +3082,6 @@ class ParsonsInput {
30823082
let ret = '';
30833083
if (this._dropArea.hasChildNodes()) {
30843084
let el = this._dropArea.firstChild;
3085-
// if (el.innerHTML == ' ') {
3086-
// console.log('here')
3087-
// ret += ' ';
3088-
// } else {
3089-
// console.log(el.innerText)
3090-
// ret += el.innerText;
3091-
// }
3092-
// dealing with  
30933085
ret += el.innerText.replace(/\xA0/g, ' ');
30943086
while (el.nextSibling) {
30953087
el = el.nextSibling;
@@ -3122,82 +3114,6 @@ class ParsonsInput {
31223114
}
31233115
newBlock.style.display = 'inline-block';
31243116
newBlock.classList.add('parsons-block');
3125-
// if (tooltips && tooltips.length > i) {
3126-
// const tooltip = document.createElement('span');
3127-
// newBlock.appendChild(tooltip);
3128-
// tooltip.innerText = tooltips[i];
3129-
// tooltip.classList.add('tooltip');
3130-
// newBlock.onmouseover = () => {
3131-
// if ((newBlock.parentNode as HTMLDivElement).classList.contains('drag-area')) {
3132-
// const parsonsTooltipEvent: RegexEvent.ParsonsTooltipEvent = {
3133-
// 'event-type': 'parsons-tooltip',
3134-
// block: data[i],
3135-
// tooltip: tooltips[i],
3136-
// start: true
3137-
// }
3138-
// this.parentElement?.logEvent(parsonsTooltipEvent)
3139-
// }
3140-
// }
3141-
// newBlock.onmouseout = () => {
3142-
// if ((newBlock.parentNode as HTMLDivElement).classList.contains('drag-area')) {
3143-
// const parsonsTooltipEvent: RegexEvent.ParsonsTooltipEvent = {
3144-
// 'event-type': 'parsons-tooltip',
3145-
// block: data[i],
3146-
// tooltip: tooltips[i],
3147-
// start: false
3148-
// }
3149-
// this.parentElement?.logEvent(parsonsTooltipEvent);
3150-
// }
3151-
// }
3152-
// }
3153-
// newBlock.onclick = () => {
3154-
// // console.log('normal block onclick');
3155-
// if ((newBlock.parentNode as HTMLDivElement).classList.contains('drag-area')) {
3156-
// let newBlockCopy = newBlock.cloneNode(true);
3157-
// this._dropArea.appendChild(newBlockCopy);
3158-
// // (newBlockCopy as HTMLDivElement).onclick = () => {
3159-
// // // console.log('normal new block onclick')
3160-
// // // clicking on the new block generated by a normal block to remove the new block
3161-
// // const endPosition = this._getBlockPosition(newBlockCopy as HTMLElement);
3162-
// // newBlockCopy.parentNode?.removeChild(newBlockCopy);
3163-
// // if (this.parentElement) {
3164-
// // this.parentElement.temporaryInputEvent = {
3165-
// // 'event-type': 'parsons-input',
3166-
// // action: RegexEvent.ParsonsInputAction.REMOVE,
3167-
// // position: [endPosition, -1],
3168-
// // answer: this._getTextArray()
3169-
// // };
3170-
// // }
3171-
// // this.el.dispatchEvent(new Event('regexChanged'));
3172-
// // }
3173-
// if (this.parentElement) {
3174-
// this.parentElement.temporaryInputEvent = {
3175-
// 'event-type': 'parsons-input',
3176-
// action: RegexEvent.ParsonsInputAction.ADD,
3177-
// position: [-1, this._getBlockPosition(newBlockCopy as HTMLElement)],
3178-
// answer: this._getTextArray(),
3179-
// 'add-block-cnt': 1,
3180-
// 'is-expandable': false,
3181-
// 'add-by-click': true
3182-
// };
3183-
// }
3184-
// this.el.dispatchEvent(new Event('regexChanged'));
3185-
// }
3186-
// // if ((newBlock.parentNode as HTMLDivElement).classList.contains('drop-area')) {
3187-
// // // clicking on the normal block dragged down to remove the normal block
3188-
// // const endPosition = this._getBlockPosition(newBlock as HTMLElement);
3189-
// // newBlock.parentNode?.removeChild(newBlock);
3190-
// // if (this.parentElement) {
3191-
// // this.parentElement.temporaryInputEvent = {
3192-
// // 'event-type': 'parsons-input',
3193-
// // action: RegexEvent.ParsonsInputAction.REMOVE,
3194-
// // position: [endPosition, -1],
3195-
// // answer: this._getTextArray(),
3196-
// // };
3197-
// // }
3198-
// // this.el.dispatchEvent(new Event('regexChanged'));
3199-
// // }
3200-
// }
32013117
}
32023118
this._initSortable();
32033119
};
@@ -3214,149 +3130,35 @@ class ParsonsInput {
32143130
direction: 'horizontal',
32153131
animation: 150,
32163132
draggable: '.parsons-block',
3217-
// onClone: (event) => {
3218-
// const newBlock = event.clone;
3219-
// newBlock.onclick = () => {
3220-
// // console.log('normal block onclick');
3221-
// if ((newBlock.parentNode as HTMLDivElement).classList.contains('drag-area')) {
3222-
// let newBlockCopy = newBlock.cloneNode(true);
3223-
// this._dropArea.appendChild(newBlockCopy);
3224-
// (newBlockCopy as HTMLDivElement).onclick = () => {
3225-
// // console.log('normal new block onclick')
3226-
// // clicking on a new block added by clicking to remove the new block
3227-
// const endPosition = this._getBlockPosition(newBlockCopy as HTMLElement);
3228-
// newBlockCopy.parentNode?.removeChild(newBlockCopy);
3229-
// if (this.parentElement) {
3230-
// this.parentElement.temporaryInputEvent = {
3231-
// 'event-type': 'parsons-input',
3232-
// action: RegexEvent.ParsonsInputAction.REMOVE,
3233-
// position: [endPosition, -1],
3234-
// answer: this._getTextArray(),
3235-
// };
3236-
// }
3237-
// this.el.dispatchEvent(new Event('regexChanged'));
3238-
// }
3239-
// if (this.parentElement) {
3240-
// this.parentElement.temporaryInputEvent = {
3241-
// 'event-type': 'parsons-input',
3242-
// action: RegexEvent.ParsonsInputAction.ADD,
3243-
// position: [-1, this._getBlockPosition(newBlockCopy as HTMLElement)],
3244-
// answer: this._getTextArray(),
3245-
// 'add-block-cnt': 1,
3246-
// 'is-expandable': false,
3247-
// 'add-by-click': true
3248-
// };
3249-
// }
3250-
// this.el.dispatchEvent(new Event('regexChanged'));
3251-
// }
3252-
// if ((newBlock.parentNode as HTMLDivElement).classList.contains('drop-area')) {
3253-
// // console.log('359')
3254-
// // (not sure) clicking on a normal block added by dragging to remove the new block
3255-
// const endPosition = this._getBlockPosition(newBlock as HTMLElement);
3256-
// newBlock.parentNode?.removeChild(newBlock);
3257-
// if (this.parentElement) {
3258-
// this.parentElement.temporaryInputEvent = {
3259-
// 'event-type': 'parsons-input',
3260-
// action: RegexEvent.ParsonsInputAction.REMOVE,
3261-
// position: [endPosition, -1],
3262-
// answer: this._getTextArray(),
3263-
// };
3264-
// }
3265-
// this.el.dispatchEvent(new Event('regexChanged'));
3266-
// }
3267-
// }
3268-
// }
3269-
// }
32703133
});
32713134
this._dropSortable = new Sortable(this._dropArea, {
32723135
group: 'shared',
32733136
direction: 'horizontal',
32743137
animation: 150,
32753138
draggable: '.parsons-block',
3276-
// onAdd: (event) => {
3277-
// // getting the position
3278-
// const isExpandable = event.item.classList.contains('expandable-block');
3279-
// // console.log(isExpandable);
3280-
// if (this.parentElement) {
3281-
// this.parentElement.temporaryInputEvent = {
3282-
// 'event-type': 'parsons-input',
3283-
// action: RegexEvent.ParsonsInputAction.ADD,
3284-
// position: [-1, this._getBlockPosition(event.item)],
3285-
// answer: this._getTextArray(),
3286-
// 'add-block-cnt': isExpandable? event.item.innerText.length : 1,
3287-
// 'is-expandable': isExpandable,
3288-
// 'add-by-click': false
3289-
// };
3290-
// }
3291-
// if (isExpandable) {
3292-
// const parentNode = event.item.parentNode;
3293-
// const text = event.item.innerText;
3294-
// const insertPosition = this._getBlockPosition(event.item);
3295-
// const nextSibling = event.item.nextSibling;
3296-
// parentNode?.removeChild(event.item);
3297-
// for (let i = 0; i < text.length; ++i) {
3298-
// const newBlock = document.createElement('div');
3299-
// if (!nextSibling) {
3300-
// this._dropArea.appendChild(newBlock);
3301-
// } else {
3302-
// parentNode?.insertBefore(newBlock, nextSibling);
3303-
// }
3304-
// newBlock.innerText = text.charAt(i);
3305-
// newBlock.style.display = 'inline-block';
3306-
// newBlock.classList.add('parsons-block');
3307-
// (newBlock as HTMLDivElement).onclick = () => {
3308-
// // console.log('expandable new block onclick')
3309-
// // clicking on a block added by clicking an expandable block to remove the new block
3310-
// const endPosition = this._getBlockPosition(newBlock as HTMLElement);
3311-
// newBlock.parentNode?.removeChild(newBlock);
3312-
// if (this.parentElement) {
3313-
// this.parentElement.temporaryInputEvent = {
3314-
// 'event-type': 'parsons-input',
3315-
// action: RegexEvent.ParsonsInputAction.REMOVE,
3316-
// position: [endPosition, -1],
3317-
// answer: this._getTextArray(),
3318-
// };
3319-
// }
3320-
// this.el.dispatchEvent(new Event('regexChanged'));
3321-
// }
3322-
// }
3323-
// }
3324-
// if (this.parentElement) {
3325-
// this.parentElement.temporaryInputEvent.answer = this._getTextArray();
3326-
// }
3327-
// this.el.dispatchEvent(new Event('regexChanged'));
3328-
// },
3329-
// onStart: (event) => {
3330-
// this._prevPosition = this._getBlockPosition(event.item);
3331-
// },
3332-
// onEnd: (event) => {
3333-
// // TODO: (bug) This is a workaround that only works in the demo.
3334-
// // compare clientY with the position of item.
3335-
// // console.log(event.item.onclick);
3336-
// let endposition = 0;
3337-
// let action = RegexEvent.ParsonsInputAction.MOVE;
3338-
// const upperbound = this._dropArea.getBoundingClientRect().top;
3339-
// const lowerbound = this._dropArea.getBoundingClientRect().bottom;
3340-
// if ((event as any).originalEvent.clientY > lowerbound || (event as any).originalEvent.clientY < upperbound ) {
3341-
// const item = event.item as HTMLElement;
3342-
// if (item.parentNode) {
3343-
// item.parentNode.removeChild(item);
3344-
// }
3345-
// endposition = -1;
3346-
// action = RegexEvent.ParsonsInputAction.REMOVE;
3347-
// } else {
3348-
// endposition = this._getBlockPosition(event.item);
3349-
// }
3350-
// if (this.parentElement) {
3351-
// this.parentElement.temporaryInputEvent = {
3352-
// 'event-type': 'parsons-input',
3353-
// action: action,
3354-
// position: [this._prevPosition, endposition],
3355-
// answer: this._getTextArray(),
3356-
// };
3357-
// }
3358-
// this.el.dispatchEvent(new Event('regexChanged'));
3359-
// },
3139+
onAdd: (event) => {
3140+
const inputEvent = {
3141+
'event-type': 'parsons-input',
3142+
action: 'add',
3143+
position: [-1, this._getBlockPosition(event.item)],
3144+
answer: this._getTextArray(),
3145+
};
3146+
this.parentElement.logEvent(inputEvent);
3147+
},
3148+
onStart: (event) => {
3149+
this._prevPosition = this._getBlockPosition(event.item);
3150+
},
3151+
onEnd: (event) => {
3152+
let endposition = this._getBlockPosition(event.item);
3153+
const action = endposition == -1 ? 'remove' : 'move';
3154+
const inputEvent = {
3155+
'event-type': 'parsons-input',
3156+
action: action,
3157+
position: [this._prevPosition, endposition],
3158+
answer: this._getTextArray(),
3159+
};
3160+
this.parentElement.logEvent(inputEvent);
3161+
},
33603162
});
33613163
};
33623164
updateTestStatus = (result) => {
@@ -3378,8 +3180,8 @@ class ParsonsInput {
33783180
this.expandableBlocks = expandableBlocks;
33793181
};
33803182
_getBlockPosition = (block) => {
3381-
let position = 0;
3382-
const parent = block.parentNode;
3183+
let position = -1;
3184+
const parent = this._dropArea;
33833185
if (parent) {
33843186
for (position = 0; position < parent.childNodes.length; ++position) {
33853187
if (parent.childNodes[position] === block) {
@@ -3460,7 +3262,7 @@ class ParsonsInput {
34603262
};
34613263
}
34623264
};
3463-
this.el.dispatchEvent(new Event('regexChanged'));
3265+
this.el.dispatchEvent(new Event('codeChanged'));
34643266
}
34653267
}
34663268
}
@@ -15534,14 +15336,6 @@ class TextInput {
1553415336
}
1553515337
}
1553615338

15537-
// declare global {
15538-
// interface Window {
15539-
// languagePluginUrl: string
15540-
// Sk: Skulpt
15541-
// regexStudentId: string
15542-
// regexCourseId: string
15543-
// }
15544-
// }
1554515339
class HParsonsElement extends HTMLElement {
1554615340
root;
1554715341
_parsonsData;
@@ -15605,17 +15399,13 @@ class HParsonsElement extends HTMLElement {
1560515399
this.appendChild(global_sheet);
1560615400
};
1560715401
logEvent = (eventContent) => {
15608-
console.log('hparsons, logevent');
15609-
// const basicEvent: RegexEvent.BasicEvent = {
15610-
// 'student-id': window.regexStudentId || 'stub-id',
15611-
// 'course-id': window.regexCourseId || 'stub-course-id',
15612-
// 'problem-id': this.problemId,
15613-
// 'input-type': this.inputType,
15614-
// 'client-timestamp': this._getTimestamp()
15615-
// };
15616-
// const ev = new CustomEvent('regex-element', {bubbles: true, detail: {...basicEvent, ...eventContent}});
15617-
// this.dispatchEvent(ev);
15618-
// // console.log({...basicEvent, ...eventContent});
15402+
// TODO: fix the logging scheme for horizontal parsons in general.
15403+
// Right now it only dispatches event of moving parsons blocks.
15404+
const basicEvent = {
15405+
'input-type': this.inputType,
15406+
};
15407+
const ev = new CustomEvent('horizontal-parsons', { bubbles: true, detail: { ...basicEvent, ...eventContent } });
15408+
this.dispatchEvent(ev);
1561915409
};
1562015410
// private _getTimestamp = (): string => {
1562115411
// const timestamp = new Date();

‎runestone/hparsons/js/hparsons-sql.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ export default class SQLHParons extends RunestoneBase {
153153
}
154154
parsonsHTML += `>`
155155
this.outerDiv.innerHTML = parsonsHTML;
156+
this.outerDiv.addEventListener('horizontal-parsons', (ev) => {this.logHorizontalParsonsEvent(ev.detail)})
156157
let blocks = [];
157158
let blockIndex = this.code.indexOf('--blocks--');
158159
if (blockIndex > -1) {
@@ -401,6 +402,17 @@ export default class SQLHParons extends RunestoneBase {
401402
}
402403
}
403404

405+
logHorizontalParsonsEvent(hparsonsEvent) {
406+
// TODO: might need to find another way to change "act".
407+
// The event string is probably too long.
408+
let ev = {
409+
event: "hparsons",
410+
div_id: this.divid,
411+
act: JSON.stringify(hparsonsEvent),
412+
};
413+
this.logBookEvent(ev);
414+
}
415+
404416
renderFeedback() {
405417
if (this.testResult) {
406418
$(this.output).text(this.testResult);

0 commit comments

Comments
 (0)