Embedding a netlogo web simulation into another site?

[Nathan Lederer]

We are developing a student assessment for research (I'm at non-profit org), and we would like to embed one of the tools/simulations.

We were thinking of using the html export, however:

1. Is there a way to reduce the file size, and load some of the js through js files?

2. Does the simulation currently trigger events when students adjust the variables, so we can collect process data? If not, we would like to add them in. We can do so manually in the various html elements, unless there's a better way to do so.

3. Lastly, is it OK to hide most of the header and footer (aside from keeping the  powered by NetLogo), so the students can focus on the simulation? Any recommended way to do so?

Looks like there's a way to pull the code and rebuild it to what we want, but since time is tight and it's for a small usability study, was looking for an easier route...

Thanks in advance.

[Jason Bertsche]

1b. Is there a way to [...] load some of the js through js files?

We don't have anything to make it easy for you, but it would totally work to take the CSS/JS and put them in separate files.  We simply bundle everything into a single HTML file to make it easy to move things around without misplacing anything.

1a. Is there a way to reduce the file size

After you've separated the files out, it would probably be fine to run them through a minifier.  We don't really have any easy way to exclude code that you won't use in your activity.

2. Does the simulation currently trigger events when students adjust the variables, so we can collect process data?

Yes.  You can see here for an example of how to gather user interaction data from a NLW model.  This example centers around the `button-widget-clicked` event, but you can look here for all of the different events that you can listen for.  It sounds to me like you want the `slider-widget-changed` event (and its ilk).  We also have a logging extension so that you can add custom logging events to the NetLogo code of your simulation (though, these logs go to an entirely separate place than the ones from the earlier example, and you might not need this solution, since it sounds like you're perfectly comfortable modifying the HTML and JS to do your own custom logging).

3. Lastly, is it OK to hide most of the header and footer (aside from keeping the  powered by NetLogo), so the students can focus on the simulation? Any recommended way to do so?

We prefer if people do not hide the "powered by NetLogo", but, hey, we also can't really stop you.  And we usually prefer to not hide a model's code, lest learners be denied the opportunity to tinker and learn and explore on their own.  But it's your activity, and we leave it to you to implement what you think is best for your situation.  Feel free to hide anything that you want to.

As for how to do it, you can just add the CSS `display: none` to the element with class `netlogo-tab-area` and all other elements that you want to get rid of.

Do let us know if you have further questions about this.

Jason Bertsche

--
You received this message because you are subscribed to the Google Groups "netlogo-devel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to netlogo-deve...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/netlogo-devel/ea012d1f-7416-4d1d-b1ed-717f5fe1b186n%40googlegroups.com.

[Nathan Lederer]

Thanks Jason, this is super helpful.

Just to clarify, we were planning to keep the "Powered by NetLogo" link, to give you folks the credit you deserve.