30:T573,html` `31:T4b1,data = [ { 'block': 'comments intro', 'class':'comment', 'text': 'Do you like a coffee?' }, { 'block': 'choices intro', 'class':'choice askcoffee', 'text': 'Yes', 'to': 'yescoffee' }, { 'block': 'choices intro', 'class':'choice askcoffee', 'text': 'No', 'to': 'nocoffee' }, { 'block': 'comments yescoffee', 'class':'comment', 'text': "Coffee is great" }, { 'block': 'comments yescoffee', 'class':'comment', 'text': "What kind of coffee do you like?" }, { 'block': 'choices yescoffee', 'class':'choice coffeetype', 'text': 'Americano', 'to': 'toamericano' }, { 'block': 'choices yescoffee', 'class':'choice coffeetype', 'text': 'Latte', 'to': 'tolatte' }, { 'block': 'comments toamericano ', 'class':'comment', 'text': 'I love Americano!' }, { 'block': 'comments tolatte', 'class':'comment', 'text': 'I like it too!' }, { 'block': 'comments nocoffee', 'class':'comment', 'text': "What else do you like?" }, { 'block': 'choices nocoffee', 'class':'choice othertype', 'text': "Water", 'to': 'towater' }, { 'block': 'choices nocoffee', 'class':'choice othertype', 'text': "Tea", 'to': 'totea' }, { 'block': 'comments towater totea', 'class':'comment', 'text': 'Sounds good!' } ]32:[] 2e:{"title":"Simple chatbot generator","cells":[{"id":0,"value":"md`# Simple chatbot generator`","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"This is a quick experiment of creating a chatbot using JSON data with a basic JavaScript interaction. \n

Each HTML block has classes assigned from JSON data.\n

Left chat's class -> comments, Right chat's class -> choices\n

Once one of the choices is clicked, class name saved in the title of the choice's block shows up","pinned":false,"hidden":false,"mode":"html"},{"id":17,"value":"html`\n

\n ${ data.map(d => \n html `\n

\n ${d.text}\n

\n `\n )}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"{\n showGroup('.intro');\n \n $('.choice').click(function() {\n let classes = $(this).attr('class');\n let thisClass = classes.split(' ')[1];\n\n $('.' + thisClass).addClass('notSelected');\n $(this).removeClass('notSelected')\n .addClass('selected');\n\n // show To class\n let toClass = $(this).data('title');\n showGroup('.' + toClass);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"function showGroup(group) {\n $(group).each(function(index) {\n let thisDelay = .53*index + .4;\n\n $(this).addClass('show');\n $(this).css('transition-delay', thisDelay+'s')\n .css('-webkit-transition-duration', '.6s')\n .css('transition-duration', '.6s');\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"$$ = require('jquery')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}