2022 Day 2 - Adding Interactive Elements to LibGuides: Simple and Not-So-Simple Interactives
Session information: https://buzz.springshare.com/springycamp/2022/adding-interactive-elements
Interactive elements are an engaging way to keep user's attention. This presentation will show how GCU has added interactive elements to guides both the simple way with LibWizard quizzes and the more advanced way with interactive SVGs. Included will be tools for working with SVGs and learning simple interactions--without needing artistic or graphic design skills.
Have any questions for Teresa Copeland?
Post them here! 💬
Comments
-
Just AWESOME presentation. Mind blown. Now I need to know what tools you used to do all of the svgs. And what can we copy from you to use on our own libguides?
1 -
Absolutely amazing presentation! I'm definitely going to be doing a deep dive on all of this information. We've been looking for ways to make our guides more interactive or just more interesting to students. We don't want to overwhelm them or throw too much at them, but at the same time we want to give them some great tools to use on their own because they're so independent. Though I don't have any questions at this time, I definitely might later. 😊
1 -
The tools list should go up with the video, but for the actual process:
- Make the image(s) in Canva or Illustrator. Save as SVG.
- Open the SVG in Illustrator and make sure all the layers are named and objects grouped together. This adds the <g> tags in for you, it's drag and drop in the layers panel in Illustrator. Save and export as SVG.
- Open the SVG in SVGOMG: https://jakearchibald.github.io/svgomg/ and run prettifier as well as use any compression or cleanup tools needed. Save.
- Open in VS Code. Add in the needed code such as roles, aria-labels, CSS and Javascript to make it actually do the thing. Since libguides is built on Bootstrap and JQuery, the code isn't very long, often just repeated. For instance the mouse over circle is a single JS function that just changes the color of text from purple to white.
The pyramid required no CSS or JS because of the native bootstrap modal. It is a link around the text that triggers the popup by id, the rest is the standard Bootstrap modal code: https://getbootstrap.com/docs/3.4/javascript/#modals
For other things, there are so many little tools online that will write CSS or JS for you. I often check Tiny Helpers to see if there's a tool that will write code for me: https://tiny-helpers.dev/
As for copying, I need to ask up the chain as it hasn't really come up before. I'll get back to you.
1 -
I'm with @Cybrarian - I'm from a community college with an extremely small staff and I absolutely LOVE the content on your guides. I'd love to be able to use them as a springboard for content and credit you all. Maybe your institution could consider using a CC BY or BY-SA license on the guides? That way people wouldn't need to constantly ask for permission.
As much as I'd really love to be able to create all kinds of guides and things from scratch, I just simply don't have the bandwidth to do so with our small staff (I'm our only FT librarian and we only have two other FT staff, including the director) and many responsibilities. It has been an absolute lifesaver to have other institutions publish CC-BY guides or give us permission to copy/use as springboards so that we don't have to constantly reinvent the wheel!
I'm so excited about the use of SVGs! I'm a little intimidated by the amount of coding and stuff - a lot of my knowledge on that is outdated and I haven't had the opportunity to brush up. I know I haven't taken full advantage of the many opportunities afforded by the bootstrap modal, either.
This presentation was amazing and really got the wheels turning! You've done outstanding work!
0 -
@Cybrarian and @J_Fiero We've cleared what we want to do with sharing. We're working on how to put up a CC By-SA that's unobtrusive, but in the meantime, the main guides are shared in the Libguides community. There's the 3 'Introduction to the GCU library' guides and Evaluating Sources that have the SVGs. Evaluating Sources is the one to copy if you want to see the pyramid of evidence with the popups.
0
