Using Copilot for Implementation

Example: Designing HTML and CSS Pages for Canvas LMS

In the implementation phase of the ADDIE model, I used Copilot to help design and style pages in HTML with inline CSS. This involved generating structured content and styling to ensure a professional and engaging presentation of the before and after examples. You don't need to know code to work with the HTML editor in Webcourses@UCF (Canvas LMS). Additionally, using HTML and CSS allows for accessibility, ensuring that all learners can access and interact with the content effectively. I interacted with Copilot in plain English language to generate the content and styling.

Prompt: "Generate an HTML page with inline CSS for a course page on Canvas LMS that includes examples of multiple-choice and true/false quizzes with feedback responses."

Example Page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Powered Assessments and Surveys</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        h2, h4 {
            color: #4fb6e3;
            text-align: center;
        }
        .content {
            margin: 20px 0;
        }
        .example {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 20px;
        }
        .prompt {
            background-color: #c2e0f4;
            padding: 10px;
            margin-bottom: 10px;
        }
        .feedback {
            color: green;
        }
        .resources {
            background-color: #c2e0f4;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>AI-Powered Assessments and Surveys</h2>
    <div class="content">
        <h4>Creating Pre or Post Surveys</h4>
        <p>Pre and post surveys are essential tools for measuring the effectiveness of a course. They help in understanding the learners' knowledge and skills before and after the course. AI tools can assist in creating these surveys by generating relevant questions and analyzing the responses to provide insights into the learners' progress.</p>
        <div class="example">
            <p><strong>Example Pre-Survey Question:</strong> On a scale of 1 to 5, how familiar are you with the ADDIE method?</p>
            <p><strong>Example Post-Survey Question:</strong> On a scale of 1 to 5, how confident are you in applying the ADDIE method to create a training course?</p>
        </div>
        <div class="prompt">
            <p><strong>Prompt:</strong> "Generate a pre-survey question to assess learners' familiarity with the ADDIE method."</p>
            <p><strong>Prompt:</strong> "Generate a post-survey question to assess learners' confidence in applying the ADDIE method."</p>
        </div>
    </div>
    <div class="content">
        <h4>Example: Multiple Choice Quiz</h4>
        <div class="example">
            <p><strong>Question:</strong> What is the capital of France?</p>
            <ul>
                <li>A) Berlin</li>
                <li>B) Madrid</li>
                <li>C) Paris</li>
                <li>D) Rome</li>
            </ul>
            <p class="feedback"><strong>Feedback:</strong> Correct! Paris is the capital of France.</p>
        </div>
        <div class="prompt">
            <p><strong>Prompt:</strong> "Generate a multiple-choice question about the capital cities of European countries with feedback for each option."</p>
        </div>
    </div>
    <div class="content">
        <h4>Example: True/False Quiz</h4>
        <div class="example">
            <p><strong>Question:</strong> The Earth is flat.</p>
            <ul>
                <li>True</li>
                <li>False</li>
            </ul>
            <p class="feedback"><strong>Feedback:</strong> Correct! The Earth is not flat; it is an oblate spheroid.</p>
        </div>
        <div class="prompt">
            <p><strong>Prompt:</strong> "Generate a true/false question about the shape of the Earth with feedback for the correct answer."</p>
        </div>
    </div>
    <div class="content">
        <h4 style="background-color: #c2e0f4;"><strong>Resources</strong></h4>
        <ul>
            <li><strong>Prompt for Multiple Choice:</strong> "Generate a multiple-choice question about [topic] with feedback for each option."</li>
            <li><strong>Prompt for True/False:</strong> "Generate a true/false question about [topic] with feedback for the correct answer."</li>
            <li><strong>Prompt for Fill-in-the-Blank:</strong> "Generate a fill-in-the-blank question about [topic] with feedback for the correct answer."</li>
            <li><strong>Prompt for Short Answer:</strong> "Generate a short answer question about [topic] with feedback for the correct answer."</li>
        </ul>
    </div>

Once the page was designed and styled, I uploaded the HTML to the Next page using the HTML editor in Canvas Webcourses@UCF (Canvas LMS). Using HTML and CSS allows for accessibility, ensuring that all learners can access and interact with the content effectively.