📱 The Solutions App
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).
Single card view
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).
🔧 Setting up your own Solutions app
The steps below demonstrate how to set up and maintain your own instance of the Solutions app, ready to populate with content.
Fork and clone the repository
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/.
Run the application with hot-reloading (launches dev server)
yarn start or if you don't have yarn,
npm run start.
Compile production app to dist
yarn build or if you don't have yarn,
npm run build.
Deploy the built bundle and assets to GitHub Pages
yarn deploy or if you don't have yarn,
npm run deploy.
Embed the Solutions app using GitHub Pages
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
To embed the card wall using an iframe, you should reference the
This application uses the Svelte framework to compile templates to vanilla JS.
📝 Create and Edit Cards
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.
Categorising Apps - The Seven C's Framework
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
"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.
ℹ️ Further Information
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.