Developed Dynamic HTML Template for Educational Platform

2 min read

📅 2024-02-17 — Session: Developed Dynamic HTML Template for Educational Platform

🕒 14:35–16:00
🏷️ Labels: HTML, Javascript, Flask, Web Development, Dynamic Content
📂 Project: Dev
⭐ Priority: MEDIUM

Session Goal

The goal of this session was to develop a dynamic HTML template for an educational platform, enabling the integration of exercises from a CSV file into various sections of the platform using JavaScript and Flask.

Key Activities

  • Created an HTML template with dynamic sections for exercises based on programming paradigms.
  • Implemented JavaScript code to dynamically populate the ‘Extras’ section from a CSV data source.
  • Developed a method to load exercises from a CSV file into a web page using JavaScript.
  • Integrated CSV data into HTML using AJAX calls to a Flask backend, including setting up a Flask route to serve CSV data as JSON.
  • Troubleshooted a 500 INTERNAL SERVER ERROR in the Flask endpoint /get_exercises, addressing CSV file path issues and error handling.
  • Resolved issues with Google Sign-In configuration and AJAX data loading.
  • Addressed JSON parsing errors in Flask endpoints and client-side JavaScript, ensuring proper JSON formatting and parsing.
  • Debugged a JavaScript error TypeError: table is null by verifying DOM element existence and script placement.

Achievements

  • Successfully developed a dynamic HTML template for the educational platform.
  • Established a working method to integrate CSV data dynamically into the platform using Flask and AJAX.
  • Resolved multiple technical issues, including server errors and JavaScript errors, enhancing the robustness of the application.

Pending Tasks

  • Further testing and validation of the dynamic content loading process.
  • Optimization of error handling mechanisms in both server-side and client-side code.

Graph View

Backlinks