The Solutions app is an open education resource (OER) that has been built to capture, showcase and develop digital practice amongst educators and students.
At Keele University, Solutions is being used to demonstrate how digital tools are helping tutors to create engaging learning experiences. Inspired by microlearning resources such as #1minuteCPD (Manchester Metropolitan University), and incorporating the 3e Framework (Edinburgh Napier University), the Solutions app addresses the overwhelming availability of technologies with potential for learning and teaching, and curates them in collaboration with educators who have succesfully adopted such tools. The app categorises each technology, providing users with suggestions (or just-in-time solutions) along pedagogic themes.
Solutions comes in 2 formats; a single card view and a card wall. Both have been designed responsively, so work across most screen sizes and devices (Google Chrome and Mozilla Firefox browsers recommended).
The single card view displays 1 digital tool at a time and has been designed for smaller online spaces, for example, a shared section of a virtual learning environment (VLE).
The card wall presents all available tools in a grid-like layout and can exist as a webpage in its own right, or as part of a larger online space (e.g. a VLE tab).
The steps below demonstrate how to set up and maintain your own instance of the Solutions app, ready to populate with content.
First, fork the tel_cards repository using your own GitHub account. A fork is a copy of a repository that will allow you to experiment without affecting the original project.
You'll then need to create a local clone to begin working with the files on your computer. If you're not familiar with GitHub, guidance on how to set up Git, fork and clone can be found at https://help.github.com/articles/fork-a-repo/.
Use yarn start or if you don't have yarn, npm run start.
A local development server will now be running at http://localhost:1234. To see the wall display view, navigate to http://localhost:1234?display=wall.
Use yarn build or if you don't have yarn, npm run build.
Use yarn deploy or if you don't have yarn, npm run deploy.
Both the single card view and card wall can be embedded directly, however, if you intend to embed the Solutions app within the Blackboard VLE, you may need to reference the included iframe pages for it to appear. For example:
-
To embed the single card view using an iframe within Blackboard, you should reference the
iframe_index.htmlfile. -
To embed the card wall using an iframe, you should reference the
iframe_wall.htmlfile .
This application uses the Svelte framework to compile templates to vanilla JS.
Creating new cards and editing existing information can be done from the cards.js file and is in JSON format. The screenshot below shows what a typical card looks like.
The Solutions app includes a filter that helps to find apps based on learning and teaching themes. For example, a user seeking a tool to help make teaching more interactive might apply the ‘Captivate’ filter, automatically highlighting tools with audience participation features (e.g. polling, quizzes etc). There are 7 filters in total. For the single card view, the filter can be found within the Catalogue tab. In the card wall, it appears at the top of the page.
The JSON property that applies these themes is activities. The 7 values are "create", "connect", "collaborate", "curate", "capture", "captivate" and "check". If you are repurposing Solutions and wish to change these values, the main.js file and svelte template files will need to be amended.
For more information about the development of this project, please see our presentation from the OER18 conference at https://goo.gl/1W1GgE.
All code and content is released under a Creative Commons licence and openly published via GitHub to encourage reuse, adoption and collaboration.