30:Tc91,game = { let game_ui_height = size+answers_rows*(padding+answer_height)+padding let shadow = 4 var ui = svg` ` // bind events d3.select(ui).selectAll('.answer_btn') .on('click', (_, i) => { if(ui_locked) { return; } (mutable answers)[i].clicked = true; mutable answers = mutable answers; // retrigger cell // update score, then proceed if answer was right if(answers[i].card[answer] == card[answer]) { mutable score += 1; // lock ui to avoid repeated pressing of buttons mutable ui_locked = true; setTimeout(() => { mutable turn += 1; mutable ui_locked = false; }, 800); } else { mutable errors += 1; } }) return ui }31:[] 2e:{"title":"Quiz","cells":[{"id":0,"value":"md`# Quiz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`### Game parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"data = d3.csvParse(`number,word\n0,zero\n1,one\n2,two\n3,three\n4,four\n5,five\n6,six\n7,seven\n8,eight\n9,nine\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"question = 'number'","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"answer = 'word'","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"answers_rows = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"answers_cols = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`### UI parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"size = 280","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"answer_height = 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"padding = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"score_height = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"rounded_rect = (w,h,c) => `\n M3 3 m${c} 0\n l${w-2*c} 0\n a ${c} ${c} 90 0 1 ${c} ${c}\n l0 ${h-2*c}\n a ${c} ${c} 90 0 1 ${-c} ${c}\n l${-w+2*c} 0\n a ${c} ${c} 90 0 1 ${-c} ${-c}\n l0 ${-h+2*c}\n a ${c} ${c} 90 0 1 ${c} ${-c}\n z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"heart = (full) => {\n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`### UI state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"mutable ui_locked = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Game state`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"mutable match = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"mutable deck = {\n match\n return shuffle(data.slice())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"mutable turn = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"mutable card = {\n turn\n \n var c = (mutable deck).pop()\n \n if(c === undefined) {\n mutable match += 1\n }\n \n return c\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"attempts = score + errors","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"mutable score = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"mutable errors = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"mutable answers = {\n turn\n var rest = shuffle(data.slice()).filter(d => d != card)\n return shuffle(rest.slice(0,answers_rows*answers_cols-1).concat([card])).map(d => ({card: d}))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"/**\n * from https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array\n * Shuffles array in place. ES6 version\n * @param {Array} a items An array containing the items.\n */\nfunction shuffle(a) {\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@4')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}