Quercus Support Resources Search

Search functionality for a Canvas course with no backend databases or servers and minimal dependencies.
Tested on Chrome 83.0.

Table of Contents

• Credits
• Installation
  • Variables
  • Setup
• Maintenance

Credits

Built using lunr.js.
Content from Quercus Support Resources, University of Toronto.
Uses the Canvas API provided by Instructure.
Up to date source code on GitHub.

Installation

Variables

qsr_search_getPages.js

var courseURL - Link to the Canvas Courses API for a single course.
link.download - Name of the downloaded JSON file.

qsr_search_pages.json

None

qsr_search.html

gtag - Google Analytics Property ID. Used in 4 separate instances.

qsr_page_iframe.html

iframe src - Download link to the qsr_search.html file uploaded within the Canvas course. Can only be retrieved after the file has actually been uploaded to the Canvas course's Files.

Setup

Make sure the variables above are updated and corrected before proceeding.

1. Copy entire contents of qsr_search_getPages.js.
2. Using Chrome, sign into Canvas and open the Developer Console (F12).
3. Paste the code and press Enter.
4. Verify that the ouput displays "SUCCESS: ..." and qsr_search_pages.json is automatically downloaded.
5. Copy entire contents of qsr_search_pages.json and paste into var pages in qsr_search.html.
6. Upload qsr_search.html into Canvas course.
7. In a new or existing Canvas Page, insert the iframe code from qsr_page_iframe.html.
8. Test the search functionality in the Canvas Page.

Maintenance

As this tool does not have a backend, the search index data must be manually updated as needed.
See Update QSR Search.docx or watch a video tutorial for more info.