CSS Flex Grid is a presentation component for the Adapt framework that displays json-formatted data in a css flexbox.
CSS Flex Grid is based on adaptlearning's text component and incorporates modern styling techniques along with data collection from an external source.
this plugin demonstrates how to create a grid with a css flexbox and fill it with data from a public google doc.* data can also be loaded from a local json file. the data is passed into a separate template and rendered in it’s own view, which is then rendered in the component’s view. an svg icon is used as a clickable link.
to get data from the online google doc, set the data source to “remote”, but you’ll have to run it off of a web server because the php won’t run in the AT. set the data source to “local” (which is default) when running it in the AT, and it’ll grab data from the included json files.
also note that this plugin is more for reference than for production. it is suggested to make a fork to support your own scenario.
*example document courtesy of Helen Maffin
fetching a collection from external data
defining a model for the collection
resetting the collection’s data
modifying a collection’s model and the data in the model
setting properties on the component’s model
defining and using a separate template
passing data to each of the templates
adding/removing views
including extra assets
scale up or down (more/less flexboxes)
change the flexbox design (using templates and css)
create alternate templates and use as a tabbed component
and in theory, the logic involved could probably be expanded to populate an entire course with external data :P
getting json out of google spreadsheets
not known at this time
Version number: 0.0.1.1
Framework versions: ^2.0.0