94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
class HomeworkVocabularyTask extends HomeworkElement {
|
|
constructor (id, source, target) {
|
|
super()
|
|
this.innerHTML =
|
|
`
|
|
<input type="text" class="source-language" name="source-language">
|
|
<input type="text" class="target-language" name="target-language">
|
|
<img src="/images/times.svg" id="delete">
|
|
<img src="/images/check-circle.svg" class="disabled" id="correct">
|
|
<img src="/images/times-circle.svg" class="disabled" id="incorrect">
|
|
`
|
|
this.id = id
|
|
this.sourceText = source
|
|
this.targetText = target
|
|
console.log(this.targetText)
|
|
this.setAttribute("result", "unknown")
|
|
this.setAttribute("state", "edit")
|
|
this.deleteButton = this.querySelector('img#delete')
|
|
this.deleteButton.addEventListener("click", this.deleteTask.bind(this))
|
|
this.sourceInput = this.querySelector("input.source-language")
|
|
this.sourceInput.value = this.sourceText
|
|
this.targetInput = this.querySelector("input.target-language")
|
|
this.targetInput.value = this.targetText
|
|
this.targetInput.addEventListener("keypress", this.evaluate.bind(this))
|
|
}
|
|
|
|
connectedCallback() {
|
|
console.log("New task added to page")
|
|
}
|
|
|
|
static get observedAttributes () {
|
|
return [ "result", "state" ]
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
switch(name) {
|
|
case "result":
|
|
console.log("Result changed")
|
|
break
|
|
case "state":
|
|
console.log("State changed")
|
|
break
|
|
default:
|
|
console.log("Unhandled attribute: '" + name + "'")
|
|
}
|
|
}
|
|
|
|
get state () {
|
|
return this.getAttribute("state")
|
|
}
|
|
|
|
set state (state) {
|
|
this.setAttribute("state", "train")
|
|
this.targetInput.value = ""
|
|
}
|
|
|
|
setFocus() {
|
|
this.targetInput.focus()
|
|
}
|
|
|
|
deleteTask() {
|
|
console.log("Delete line")
|
|
this.dispatchEvent(new CustomEvent("delete", {detail:{id: this.id}, bubbles: true, cancelable: true}))
|
|
}
|
|
|
|
getId() {
|
|
return this.id
|
|
}
|
|
|
|
setSourceText(text) {
|
|
this.sourceInput.value = text
|
|
}
|
|
|
|
setTargetText(text) {
|
|
this.targetInput.value = text
|
|
}
|
|
|
|
evaluate(event) {
|
|
if(this.state === "train" && event.key === "Enter") {
|
|
console.log("Evaluating '" + this.targetText + "' against entered '" + this.targetInput.value + "'")
|
|
if(this.targetInput.value == this.targetText) {
|
|
console.log("Correct")
|
|
this.setAttribute("result", "correct")
|
|
} else {
|
|
console.log("Not correct")
|
|
this.setAttribute("result", "incorrect")
|
|
}
|
|
if(this.nextElementSibling != null) {
|
|
this.nextElementSibling.setFocus()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
customElements.define('homework-vocabulary-task', HomeworkVocabularyTask) |