Public
Edited
May 20
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
DrawBoard = (level) => {
if (round === 50) return html`<h2>You correctly guessed ${correct} out of ${round} Non-Words.</h2>`
let notIndex = _.random(3)
let wordIndices = [0,1,2,3].filter(x=>x !== notIndex)
wordIndices = _.shuffle(wordIndices)

// randomize word order
let board = new Array(4)
board[notIndex] = level.notword
board[wordIndices[0]] = level.word1
board[wordIndices[1]] = level.word2
board[wordIndices[2]] = level.word3
let container = html`<div class="board"></div>`
let scoreBoard = html`<div>${correct}/${round}</div>`
for (let i = 0; i < board.length; i++) {
let word = board[i]
let div = html`<div class="word">${word.toUpperCase()}</div>`
let handleClick = () => {
mutable guesses = [...guesses, i === notIndex]
if (i === notIndex) mutable correct++
mutable round++
}
div.addEventListener('click', handleClick)
container.appendChild(div)
}
container.appendChild(scoreBoard)
if (round > 0) {
let summaryTextRight = `Correct! ${levels[round-1].notword.toUpperCase()} is not a word.`
let summaryTextWrong = `Incorrect! ${levels[round-1].notword.toUpperCase()} is not a word.`
container.appendChild(html`<div>${guesses[round-1] ? summaryTextRight : summaryTextWrong}</div>`)
}
return container
}
Insert cell
Insert cell
updateRight = () => true
Insert cell
updateWrong = () => true
Insert cell
mutable round = 0
Insert cell
mutable correct = 0
Insert cell
mutable guesses = []
Insert cell
Insert cell
Insert cell
// {
// const url = 'https://raw.githubusercontent.com/wordnik/wordlist/main/wordlist-20210729.txt';
// const response = await fetch(url)
// const text = await response.text()
// const rows = text.split('\n')
// const wordnik = rows.map(row => row.replace(/"/g, ''))

// return [
// levels
// .map(x=>x.notword)
// .filter(x=> wordnik.includes(x)),
// levels
// .map(x=> [x.word1, x.word2, x.word3])
// .map(x=> x.every(y => wordnik.includes(y)))
// .filter(x=> x===false)
// ]
// }
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more