Dexcom Education Crossword Feature Journal

Overview

In this journal, I will outline the development of the Dexcom Education Crossword feature. The crossword serves as both an educational and interactive tool aimed at improving knowledge retention and engagement among users.

Name and Target Audience

The feature is called the Dexcom Education Crossword, designed specifically for users who are familiar with or interested in learning more about Dexcom products and services. The crossword is aimed at both new users seeking to understand Dexcom’s technology and existing users who want to test their knowledge in a fun, engaging way.

How to Play the Crossword

The game is simple yet engaging. Players are presented with a standard crossword grid where they must fill in answers to clues related to Dexcom products and their functionalities.

  1. Grid Layout: A 20x20 grid of squares is presented.
  2. Clues: Each square in the grid corresponds to a clue. Clues are categorized based on difficulty, with simpler questions aimed at new users and more challenging ones for experienced users.
  3. Interactions: As the user solves each clue, they can check if their answer is correct, with real-time feedback available.
  4. Scoring: The game tracks the user’s accuracy and time, giving instant feedback upon completion.

Design and Planning: Phase One

Frontend Design

The frontend of the Dexcom Education Crossword is designed to provide a seamless user experience while maintaining a clean, user-friendly interface. Here are some key features of the frontend design:

  1. Crossword Grid: A dynamically generated 20x20 grid, where players can click on a square to input their answer. This grid will be populated based on the clues fetched from the backend.
  2. Clue Display: Users will see the clues either listed next to the grid or as part of a sidebar. Each clue will have a corresponding number that matches the position on the grid.
  3. Feedback System: Upon submitting answers, users will receive real-time feedback on the accuracy of their answer. Incorrect answers will be highlighted, while correct answers will be validated with a visual cue.

  4. Responsive Design: The crossword will be designed to be responsive, ensuring it can be played seamlessly on both desktop and mobile devices.

    Technologies used:

    • HTML/CSS for grid layout and styling.
    • JavaScript for interactive grid functionality (input validation, real-time feedback).
    • Bootstrap for responsive layout and design.

Backend Design

The backend for the Dexcom Education Crossword is responsible for handling user interactions, storing feedback, and managing game data such as crossword grids and user submissions. The backend is powered by Flask, a lightweight web framework, and integrates with a SQL database for storing user feedback.

Key Backend Features

  1. Feedback Model The core of the backend is the Feedback model, which stores user feedback on their crossword experience. Each feedback entry includes the accuracy rating, user comments, and a timestamp to track when the feedback was submitted.

    ```python class Feedback(db.Model): id = db.Column(db.Integer, primary_key=True) accuracy = db.Column(db.Integer, nullable=False) comment = db.Column(db.String(500), nullable=False) timestamp = db.Column(db.DateTime, default=datetime.utcnow)

    def __init__(self, accuracy, comment):
    self.accuracy = accuracy
    self.comment = comment

def to_dict(self):
    return {
        'id': self.id,
        'accuracy': self.accuracy,
        'comment': self.comment,
        'timestamp': self.timestamp.isoformat()
    } ```python

Purpose

The Feedback model ensures that the data collected from users is consistent, stored efficiently, and easy to retrieve.

API Endpoints

The backend API is built with Flask Blueprints to organize and structure the code. The main endpoints provided are:

  • POST /api/feedback: Submits user feedback, including accuracy and comments.
  • GET /api/feedback: Fetches all feedback entries, ordered by timestamp.

Example of the Feedback Submission Endpoint

```python @crossword_api.route(‘/api/feedback’, methods=[‘POST’]) def submit_feedback(): data = request.get_json() if not data or ‘accuracy’ not in data or not data.get(‘comment’, ‘’).strip(): return jsonify({‘error’: ‘Missing accuracy or comment’}), 400

feedback = Feedback(accuracy=data['accuracy'], comment=data['comment'].strip())
db.session.add(feedback)
db.session.commit()
return jsonify(feedback.to_dict()), 201

User story:

As a player, I want to submit feedback about my experience with the Dexcom Education Crossword and the score I get, so that I can record my performance and learn about glucose level in human body system.

Conclusion

  • The Dexcom Education Crossword feature is designed to be both engaging and educational.
  • The frontend provides a clean user interface, while the backend handles feedback submission and data storage efficiently.
  • Continuous improvements can be made to enhance both user experience and performance.

Things to Keep Working On

  • Backend Model
    • Improve database structure for scalability, especially as the number of users increases.
    • Optimize API endpoints for better performance and response times.
  • Implement Answer Key
    • Add an answer key feature for users to check their completed crossword, ensuring it provides helpful feedback.
    • Implement timed answers and review options after the user finishes the crossword.
  • Improve Mobile Responsiveness
    • Ensure that the crossword adjusts smoothly across all screen sizes, especially for mobile users.
    • Test and refine mobile interface to prevent usability issues on smaller screens.