Modify lesson page to render course information dynamically from the database

[alexchen2]

As of now, the current lesson page has not been adapted to dynamically read and display courses and their content from the database. The HTML file just contains a tag structure for side tabs and lesson panels filled with placeholder data, but we need to configure the file so that this same structure is generated, but with actual lesson data relevant to users.

The task is to modify the current HTML page structure of lesson.html with Jinja, so that the necessary number of tabs/lesson panels are created and every container holds course information from the database. In addition, the current /lesson/<int:course_id> endpoint in main.py needs to be modified so that queried course, module, topic, and lesson data is sent to front-end.

[alexchen2]

The front-end side of things may be a bit difficult to modify, given how many separate parts need to be updated. Here's a rough outline of what needs to be changed:

• Take the overall structure within lines 15 to 161 and generate it dynamically with a Jinja loop. This generates the left side tabs, and consists of a recursive tag pattern repeated for subtab groups (course name -> modules -> topics -> lessons/quizzes). Inner text should also be dynamically filled for tab titles and subtitles. For each tab level, the structure is formatted along the lines of:

  <outer ul wrapper>
     <div, button, or a for the clickable tab>
         ...
     </>
     <li containing inner subtabs, if applicable>
         (repeat pattern for inner tab levels)
     </>
  </>

  • For class="tab-lesson" li's that contain anchor tags, the href link should be the same as the tag id of whatever lesson panel it correlates to; this way, the correct panel will appear when clicking its corresponding lesson tab.
• Take the overall panel structure within lines 169 to 359 and generate it dynamically in a similar way as the tags. Here, you just want to create individual div's for each lesson panel (no content nesting here).
  • There are two types of panels; text lesson panels, and video lesson panels. These contain different structures, and they are differentiated within lesson.js through the custom panel-type attribute (you should dynamically set this to "video" or "text").
  • The tag id of each class="panel" div should correspond to whatever href link you set in their corresponding lesson tabs (without the # in front). You can use whatever naming system you like for these id's; just make sure that it is consistent between the two structures.
  • I've included support for textbook file downloads within all panels; the related content is found within the class="textbook-link" div. The span contains the name of the file, while the href should point to the path of the file within the vendor folder. The file path should be structured like ../static/vendor/textbooks/<course id>/<textbook name>.pdf (for now, you can probably keep this link pointed to the sample.pdf file).
  • For videos within video lesson panels, the related content can be found within the class="video-wrapper" divs. The actual video files should be stored in static/vendor/lesson-videos/<course ID - 4 digits>-<moduleID - 2 digits>-<topicID - 2 digits>/, and each video should be named as video.mp4. A thumbnail png can also be included in the same folder as the video, named as thumbnail.png; its corresponding tag will be automatically generated from lesson.js. The video tag id should be named as "video-<course ID - 4 digits>-<moduleID - 2 digits>-<topicID - 2 digits>", matching the same folder structure that the video is stored in.

(More information to follow if necessary.)

[MithunPara]

interested