D295 Task 3: Collaborative E-Learning Experience Outline

2025-10-28

D295 Task 3: Designing Collaborative E-Learning Experiences

I. Introduction

This collaborative e-learning experience is designed for students to work together on a quest-based web application. The focus is on using JavaScript to connect to APIs, integrate AI (Gemini), and manage microblog (feedback) data in a database. Students share code, debug together, and help each other design a great user experience.

II. E-Learning Experience Plan

A1. Components

  • Topic: Collaborative Quest Development with JavaScript APIs, AI, and Databases

  • Description: In this e-learning experience, we, the class, work together to design and build a quest-based web application. We use JavaScript to connect to APIs (microblog), integrate AI (Gemini), and learn to store data with a database. Our project is collaborative: we share code, debug together, and help each other design a great user experience.

  • Grade: High School (Grades 10–12)

  • Learning Goal: Work as a team to create a functional, ethical, and engaging quest app using real-world coding and collaboration skills.
    • Team 1: West Coast Quest
      • Food, Travel, Sports guided by AI
    • Team 2: Digital Famine Quest
      • Inter-planet restoration of Microblogging, Digital Literacy, AI, etc
  • Learning Objectives:
    1. Use JavaScript to fetch data from APIs and handle responses with promises in User presented API.
    2. Integrate AI (Gemini) to enhance the quest experience.
    3. Implement database CRUD operations for quest progress and rewards.
    4. Design user experiences that are fun, accessible, and meaningful.
    5. Apply digital citizenship principles in all project work.
  • Academic Standards:
    • ISTE Standard 1.4: Innovator Designer
    • ISTE Standard 1.5: Computational Thinker
    • ISTE Standard 1.7: Global Collaborator

A2. Digital Tools for Collaboration (Two provided)

  • GitHub: For sharing code, tracking changes, and reviewing each other’s work.

  • VSCode Live Share: For real-time pair programming and group debugging.

How tools support collaboration

  • GitHub lets us work on the same codebase, suggest improvements, and merge our ideas safely.

  • VSCode Live Share allows us to code together, ask questions, and solve problems as a team—even if we’re not in the same room.

A3. Collaborative Activities (Two provided)

  • Activity 1: Pair up to implement a new API feature (e.g., fetch quest data or integrate Gemini AI). One student builds the activity, writes the code, the other reviews, tests it, and coordinates “pull request”.
    Alignment: JavaScript API Consumption, AI Integration, Computational Thinker.

  • Activity 2: In small groups, design and test a new quest challenge. Each group presents their UX design and explains how they used UX design principles and digital citizenship principles.
    Alignment: Database API Usage, Digital Citizenship, Quest UX Design, Global Collaborator.

A4. Facilitation Strategies

  • Daily stand-ups: Use daily stand-up meetings (in-person or online) to set goals, share progress, and ask for help.

  • Debugging/support channel: Set up a shared “debugging channel” (Slack/Discord) where anyone can post questions or bugs for group support.

How strategies support collaboration

  • Stand-ups keep everyone on track and make sure no one is stuck alone.

  • The debugging channel encourages us to help each other and learn from different solutions.

A5. Accessibility Considerations

  • Make sure all code and documentation use clear language and comments.

  • Use color-blind–friendly palettes and readable fonts in the quest for UI.

  • Provide alternative text for images and ensure keyboard navigation works.

  • Use different modalities in lesson (audio, video, speech to text)

A6. Differentiation Strategies (Two Provided)

  • Allow students to choose roles (e.g., Scrum Master, Scrummer, Designer, Tester, Presenter) based on their strengths and interests.

  • Offer extra challenges (like advanced API design and Database integration) for students who want to go further and provide templates or code snippets for those who need more support.

III. ISTE Standards Alignment

B1a. List of relevant ISTE standards

  • ISTE Standard 1.4: Innovator Designer

  • ISTE Standard 1.5: Computational Thinker

  • ISTE Standard 1.7: Global Collaborator

B1b. How alignment improves student learning

By aligning with these ISTE standards, we learn to design, break down complex coding problems, work together globally, and use technology responsibly. This prepares us for real-world teamwork and problem-solving in tech careers.

IV. References

  • International Society for Technology in Education (ISTE). (2021). ISTE Standards for Students. https://www.iste.org/standards/iste-standards-for-students

  • GitHub Docs. (2025). https://docs.github.com/

  • Microsoft. (2025). VSCode Live Share. https://visualstudio.microsoft.com/services/live-share/

  • Google AI. (2025). Gemini API Documentation. https://ai.google.dev/docs