Related Posts

Part 1

• Goals and Assumptions.
• Initial Setup of the Flask backend.

Part 2

• Implement LTI-related routes in Flask.
• Do my best to explain the abstraction that’s happening with PyLTI1p3

Part 3

• Question data – JSON structure.
• Revisit project directories.
• Use create-react-app to start a new React.js front-end project.
• Install dependencies: Tailwind.
• Start building out the initial App.js with the proper hooks and event handler. A single page app (SPA), very simple, so we’re not venturing outside this one file for our single quiz component.

Part 4

• Create the Flask template and arguments to be passed to the frontend.
• Build the React.js frontend and stage static files.

Part 5

• Create a Python module to contain the initial set of questions.
• Create Flask API routes with HTTP request definitions.
• Create a separate Python module for the database methods. Creation of sqlite database and initial loading of questions.
• Final update to the frontend to use the Flask API.

Github Repos:

Frontend (React, javascript): https://github.com/eharvey71/react-simple-quiz

Backend (Flask, Python): https://github.com/eharvey71/lti_example_quiz_react_flask

Resources:

Reference Project: https://github.com/dmitry-viskov/pylti1.3-flask-example

PyLTI1p3 for implementing LTI 1.3/Advantage in Python: https://pypi.org/project/PyLTI1p3/

LTI 1.3 Core Specification: https://www.imsglobal.org/spec/lti/v1p3