idyll-lang/Lobby

https://idyll-lang.github.io/

Ricky Reusser

@rreusser

a plugin could download the notebook and write the loader script

long story short, if modules are tolerable, this approach allows regular idyll + observable notebooks via modules

Ricky Reusser

@rreusser

to be honest though, I can't remember what problem I was trying to solve by switching to js modules, and I'm considering just taking my mechanism for maintaining a global cache of notebooks so you can include cells one at a time and applying it to the existing plugin :/

Ricky Reusser

@rreusser

This message was deleted

ReferenceError: regeneratorRuntime is not defined hmm… that was one issue at least…

Matthew Conlen

@mathisonian

@rreusser sorry i haven't had a chance to look through this yet

is this loading the code at runtime from observable's api?

or still needs to download the notebook

Ricky Reusser

@rreusser

all good. it still needs to download the notebook

but the difference is:

it downloads the new module version, which maybe doesn't have the same regeneratorRuntime issues and doesn't actually need to be compiled into the app

it's just static assets

and it adds a script tag to load the notebook outside of the idyll/react context and communicates back to idyll/react via window

Matthew Conlen

@mathisonian

ahhh okay

Ricky Reusser

@rreusser

I think I maybe liked not actually building the notebook into the JS and just loading it as static assets

the only caveat:

for reasons I don't understand, module type scripts can't introspect their own script element as a means of passing data, and it can't resolve imports if the script was created via a data URL, so the only remaining option is to generate a small loader script to get the right static asset paths in place

other than that the react element doesn't need to change though, which I think is a plus (doesn't need to fail on the first time since the only generated content is loaded at runtime via a script tag)

I finally got the idyll on my site fully updated and working, so I was hoping to finally clear a nice pathway for importing notebook content into it

Ricky Reusser

@rreusser

I think the main concern is just: are module scripts acceptable

if so, I think this is a good strategy. if not, then the other approach seems necessary.

Matthew Conlen

@mathisonian

I would think they're acceptable. the main downside would be SSR and old browser compatibility?

i don't think the other approach solves the SSR problem anyways

Ricky Reusser

@rreusser

yeah. didn't want to get too fancy before it works, but was thinking could just have a static image fallback until it loads and for SSR

Geoffrey Litt

@geoffreylitt

I'm trying to get idyll-vega-lite working -- first got { Error: Cannot find module 'core-js/modules/es.array.concat', so i did npm install core-js and that fixed it.

but now i'm getting this error when i include the VL component:

SyntaxError: Unexpected token (1258:10) while parsing file: /Users/geoffreylitt/dev/carbon-majors/node_modules/vega-parser/build/vega-parser.js

anyone familiar with this error?

Matthew Conlen

@mathisonian

ugh this vega lite component is causing so many headaches

@geoffreylitt what OS are you on?

i would try to run idyll with the --no-minify flag, that error looks to me like it may be coming from our JS minifier

Geoffrey Litt

@geoffreylitt

@mathisonian thanks -- I'm on OS X Mojave.

I tried --no-minify but still getting the same error. The stack trace points to acorn, a JS parser:

SyntaxError: Unexpected token (1258:10) while parsing file: /Users/geoffreylitt/dev/carbon-majors/node_modules/vega-parser/build/vega-parser.js
    at Parser.pp$4.raise (/Users/geoffreylitt/dev/carbon-majors/node_modules/acorn/dist/acorn.js:2840:15)
    at Parser.pp.unexpected (/Users/geoffreylitt/dev/carbon-majors/node_modules/acorn/dist/acorn.js:689:10)

for now i think i'm gonna try d3 instead and avoid vega-lite

Jonne Arjoranta

@jaranta

Hey everyone! I'm trying to figure out idyll (https://github.com/jaranta/gendered-computing-idyll), but I'm not so familiar with these things. Could anyone help me figure out what "The time type is a line chart that expects the x values in the data to be in the temporal domain." means in the Chart documentation?

Matthew Conlen

@mathisonian

hey @jaranta that just means that it wants JavaScript date objects

that sentence is way too academic

so the data could be something like [{x: new Date(), y: 1 }]

Jonne Arjoranta

@jaranta

@mathisonian oh, right. Thanks for the clarification!

Jonne Arjoranta

@jaranta

It seems that whatever Date object I give to the Chart, I get a bunch of syntax errors. The minimal example would be:

[var name:"computerScienceDegrees" value:`[
  {year: New Date(), percent: 12},
]` /]
[Chart type:"time" data:computerScienceDegrees domain:`[1968, 2006]` range:`[0, 50]` x:"year" y:"percent" /]

The page is built, but not before I get an Unexpect token error. Am I misusing the Chart somehow?

Matthew Conlen

@mathisonian

@jaranta i think that syntax error is because New is capitalized

[var name:"computerScienceDegrees" value:`[
  {year: new Date(2019, 0, 1), percent: 12},
  {year: new Date(2019, 1, 2), percent: 13},
  {year: new Date(2019, 2, 3), percent: 14},
]` /]
[Chart type:"time" data:computerScienceDegrees domain:`null` range:`[0, 50]` x:"year" y:"percent" /]

this is working for me though the x-axis labels are a little wonky. i'm passing in null to the domain so that it is computed automatically from the data

Jonne Arjoranta

@jaranta

@mathisonian you're right! That fixed the syntax error, but I can't seem to get the x-axis labels to work, which is what I was originally struggling with. I'd like a nice date chart, but for some reason I get numbers starting from 2 million instead of dates.

Matthew Conlen

@mathisonian

yeah, i'm seeing that too

i'm working on a patch to the vega-lite chart component right now, which is honestly a more solid option and will probably be the default going forward in the next version bump

if you can wait a couple of days for that to land i'd recommend switching over and not fighting the chart component on the labels

Jonne Arjoranta

@jaranta

Okay, I'll do that! Thanks.

Kitt

@gerudo7

Hi, I am using Idyll to make some worksheets for a class and wanted to create multiple choice questions using radio buttons
which give some kind of text feedback to students after a submit button is pressed. What is the best way to go about doing this in Idyll/are there special Idyll functions for this sort of thing?

Kitt

@gerudo7

Update: we have figured out how to set up the multiple choice with a display and it is working nicely. Another thing we are interested in doing is requiring students to get an answer right before they move on.
Is there an elegant way to go about doing this? (All I can think of is to hide everything in a conditional which is probably
not a good idea.)

This is how we have set up the template quiz so far, if you have any suggestions they are appreciated :)

[var name:"radioVal" value:"test1" /]
[var name:"showAnswer" value:false /]
[Radio value:radioVal options:`["test1", "test2"]` onClick:`showAnswer = false` /]

[Button onClick:`showAnswer = true`]
  Submit
[/Button]

[Conditional if:`showAnswer && radioVal === "test1"`]
  You answered [Display value:`radioVal`/]. This is correct!
[/Conditional]
[Conditional if:`showAnswer && radioVal === "test2"`]
  You answered [Display value:`radioVal`/]. Please consider x. This is incorrect.
[/Conditional]

Matthew Conlen

@mathisonian

hey @gerudo7 i think your instinct is right that using a conditional would be the most straightforward way of building that functionality, although it may not be the prettiest markup

I think you could also abstract this logic into a component, for example make a "question" component that takes as input a list of options, as well as any other questions that have to be answered before it appears on the page

[var name:"q1Correct" value:false /]
[var name:"q2Correct" value:false /]

[Question options:`["test1", "test2"]` correct:q1Correct  /]

[Question options:`["test1", "test2"]` showAfter:q1Correct correct:q2Correct  /]

e.g. an api kind of like that

Matthew Conlen

@mathisonian

@gerudo7 here's a little example https://gist.github.com/mathisonian/b7487c66c8b07adfb13c1b50003c9051

Where communities thrive

People

Repo info

Activity