Aktivitätstyp-Anhänge

Dies ist die fünfte Schritt-für-Schritt-Anleitung der Serie zu Classroom-Add-ons.

In dieser Schritt-für-Schritt-Anleitung ändern Sie das Beispiel aus dem vorherigen Schritt, um einen Anhang vom Typ „Aktivität“ zu erstellen. Dies sind alle Anhänge, die von Schülern/Studenten eingereicht werden müssen, z. B. eine schriftliche Antwort, ein Quiz oder andere von Schülern oder Studenten erstellte Artefakte.

Die Unterscheidung zwischen Inhaltstypen und Anhängen des Aktivitätstyps ist wichtig. Anhänge des Typs "Aktivität" unterscheiden sich in den folgenden Punkten vom Inhaltstyp:

  • Rechts oben im iFrame der Schüler-/Studentenansicht wird die Schaltfläche „Abgeben“ angezeigt.
  • Sie sind eine eindeutige Kennzeichnung für Aufgaben von Schülern/Studenten.
  • Die Karte des Anhangs wird in der Benutzeroberfläche von Classroom angezeigt.
  • Sie können eine Note für die Aufgabe festlegen, zu der sie gehören.

In der nächsten Schritt-für-Schritt-Anleitung finden Sie Diskussionen zur Benotung. Im Verlauf dieser Schritt-für-Schritt-Anleitung führen Sie folgende Schritte aus:

  • Ändern Sie die vorherigen Anfragen zum Erstellen von Anhängen an die Classroom API, um einen Anhang des Typs "Aktivität" zu erstellen.
  • Implementieren Sie dauerhaften Speicher für abgegebene Aufgaben von Schülern/Studenten.
  • Ändern Sie die vorherige Route für die Ansicht „Schüler/Studenten“, um die Eingaben der Schüler oder Studenten anzunehmen.
  • Geben Sie eine Route an, um den iFrame der Aufgabenbewertung von Schülern/Studenten bereitzustellen.

Wenn Sie fertig sind, können Sie über die Google Classroom-Benutzeroberfläche als Lehrkraft angemeldeten Aktivitätsanhängen für Aufgaben erstellen. Die Kursteilnehmer können auch die Aktivität im iFrame abschließen und eine Antwort senden. Die Lehrkraft kann sich die abgegebene Aufgabe des Schülers/Studenten in der Classroom-Benotungs-UI ansehen.

Verwenden Sie für dieses Beispiel die Anhangsvorlage aus der vorherigen Schritt-für-Schritt-Anleitung, die ein Bild einer berühmten Sehenswürdigkeit und eine Bildunterschrift mit dem Namen der Sehenswürdigkeit zeigt. Die Aktivität besteht darin, den Schüler oder Studenten aufzufordern, den Namen der Sehenswürdigkeit anzugeben.

Anfrage zum Erstellen von Anhängen ändern

Rufen Sie den Abschnitt Ihres Codes auf, in dem Sie in der vorherigen Schritt-für-Schritt-Anleitung einen Anhang mit Inhaltstyp erstellt haben. Das Schlüsselelement hier ist eine Instanz eines AddOnAttachment-Objekts, in dem zuvor teacherViewUri, studentViewUri und title für den Anhang angegeben wurden.

Während alle Add-on-Anhänge diese drei Felder erfordern, bestimmt das Vorhandensein oder Fehlen einer studentWorkReviewUri, ob der Anhang einen Aktivitäts- oder Inhaltstyp hat. Eine CREATE-Anfrage mit einem ausgefüllten studentWorkReviewUri wird zu einem Anhang des Aktivitätstyps, während eine CREATE-Anfrage ohne studentWorkReviewUri zu einem Inhaltstyp-Anhang wird.

Die einzige Änderung, die an dieser Anfrage vorgenommen werden muss, besteht darin, das Feld studentWorkReviewUri auszufüllen. Fügen Sie hier eine Route mit einem passenden Namen hinzu. Sie implementieren die Route in einem späteren Schritt.

Python

In unserem Beispiel befindet sich dies in der Methode create_attachments in der Datei webapp/attachment_routes.py.

attachment = {
    # Specifies the route for a teacher user.
    "teacherViewUri": {
        "uri":
            flask.url_for(
                "load_activity_attachment",
                _scheme='https',
                _external=True),
    },
    # Specifies the route for a student user.
    "studentViewUri": {
        "uri":
            flask.url_for(
                "load_activity_attachment",
                _scheme='https',
                _external=True)
    },
    # Specifies the route for a teacher user when the attachment is
    # loaded in the Classroom grading view.
    # The presence of this field marks this as an activity-type attachment.
    "studentWorkReviewUri": {
        "uri":
            flask.url_for(
                "view_submission", _scheme='https', _external=True)
    },
    # The title of the attachment.
    "title": f"Attachment {attachment_count}",
}

Dauerhaften Speicher für Inhaltstyp-Anhänge hinzufügen

Zeichnen Sie die Antwort des Schülers auf unsere Aktivität auf. Sie können später nachsehen, wenn sich die Lehrkraft die abgegebene Aufgabe im iFrame von „Aufgaben von Schülern/Studenten“ ansieht.

Richten Sie ein Datenbankschema für ein Submission ein. In unserem Beispiel müssen Schüler und Studenten den Namen der Sehenswürdigkeit eingeben, die in einem Bild angezeigt wird. Ein Submission enthält daher die folgenden Attribute:

  • attachment_id: Eine eindeutige Kennung für einen Anhang. Von Classroom zugewiesen und in der Antwort beim Erstellen eines Anhangs zurückgegeben.
  • submission_id: Eine Kennung für die abgegebene Aufgabe eines Schülers/Studenten. Von Classroom zugewiesen und in der getAddOnContext-Antwort in der Ansicht „Schüler/Studenten“ zurückgegeben.
  • student_response: die Antwort des Schülers/Studenten.

Python

Erweitern Sie die SQLite- und flask_sqlalchemy-Implementierung aus den vorherigen Schritten.

Rufen Sie die Datei auf, in der Sie die vorherigen Tabellen definiert haben (models.py, wenn Sie unserem Beispiel folgen). Fügen Sie am Ende der Datei Folgendes hinzu:

# Database model to represent a student submission.
class Submission(db.Model):
    # The attachmentId is the unique identifier for the attachment.
    submission_id = db.Column(db.String(120), primary_key=True)

    # The unique identifier for the student's submission.
    attachment_id = db.Column(db.String(120), primary_key=True)

    # The student's response to the question prompt.
    student_response = db.Column(db.String(120))

Importieren Sie die neue Klasse Submission in die Serverdatei mit den Routen, die Anhänge verarbeiten.

Route für Schüler-/Studentenansicht ändern

Ändern Sie als Nächstes die vorherige Route für die Ansicht der Schüler/Studenten so, dass ein kleines Formular angezeigt wird und die Eingabe des Schülers/Studenten annimmt. Sie können den Großteil des Codes aus der vorherigen Schritt-für-Schritt-Anleitung wiederverwenden.

Suchen Sie den Servercode, der die Route für die Schüler-/Studentenansicht bereitstellt. Dies ist die Route, die beim Erstellen eines Anhangs im Feld studentViewUri angegeben wurde. Als Erstes müssen Sie submissionId aus der Antwort getAddOnContext extrahieren.

Python

In unserem Beispiel befindet sich dies in der Methode load_activity_attachment in der Datei webapp/attachment_routes.py.

# Issue a request to the courseWork.getAddOnContext endpoint
addon_context_response = classroom_service.courses().courseWork(
).getAddOnContext(
    courseId=flask.session["courseId"],
    itemId=flask.session["itemId"]).execute()

# One of studentContext or teacherContext will be populated.
user_context = "student" if addon_context_response.get(
    "studentContext") else "teacher"

# If the user is a student...
if user_context == "student":
    # Extract the submissionId from the studentContext object.
    # This value is provided by Google Classroom.
    flask.session["submissionId"] = addon_context_response.get(
            "studentContext").get("submissionId")

Sie können auch eine Anfrage zum Abgabestatus der Schüler/Studenten stellen. Die Antwort enthält einen SubmissionState-Wert, der angibt, ob der Schüler/Student den Anhang geöffnet oder abgegeben hat. Dies kann nützlich sein, wenn Sie Änderungen an einer abgegebenen Aufgabe nicht zulassen möchten oder wenn Sie Lehrkräften Einblick in den Fortschritt der Schüler geben möchten:

Python

In unserem Beispiel ist dies eine Fortsetzung der load_activity_attachment-Methode oben.

# Issue a request to get the status of the student submission.
submission_response = classroom_service.courses().courseWork(
).addOnAttachments().studentSubmissions().get(
    courseId=flask.session["courseId"],
    itemId=flask.session["itemId"],
    attachmentId=flask.session["attachmentId"],
    submissionId=flask.session["submissionId"]).execute()

Rufen Sie schließlich die Anhangsinformationen aus unserer Datenbank ab und stellen Sie ein Eingabeformular bereit. Das Formular in unserem Beispiel besteht aus einem String-Eingabefeld und einer Schaltfläche zum Senden. Zeigen Sie das Bild der Sehenswürdigkeit und fordern Sie den Schüler auf, seinen Namen einzugeben. Sobald sie eine Antwort erhalten, zeichnen Sie sie in unserer Datenbank auf.

Python

In unserem Beispiel ist dies eine Fortsetzung der load_activity_attachment-Methode oben.

# Look up the attachment in the database.
attachment = Attachment.query.get(flask.session["attachmentId"])

message_str = f"I see that you're a {user_context}! "
message_str += (
    f"I've loaded the attachment with ID {attachment.attachment_id}. "
    if user_context == "teacher" else
    "Please complete the activity below.")

form = activity_form_builder()

if form.validate_on_submit():
    # Record the student's response in our database.

    # Check if the student has already submitted a response.
    # If so, update the response stored in the database.
    student_submission = Submission.query.get(flask.session["submissionId"])

    if student_submission is not None:
        student_submission.student_response = form.student_response.data
    else:
        # Store the student's response by the submission ID.
        new_submission = Submission(
            submission_id=flask.session["submissionId"],
            attachment_id=flask.session["attachmentId"],
            student_response=form.student_response.data)
        db.session.add(new_submission)

    db.session.commit()

    return flask.render_template(
        "acknowledge-submission.html",
        message="Your response has been recorded. You can close the " \
            "iframe now.",
        instructions="Please Turn In your assignment if you have " \
            "completed all tasks."
    )

# Show the activity.
return flask.render_template(
    "show-activity-attachment.html",
    message=message_str,
    image_filename=attachment.image_filename,
    image_caption=attachment.image_caption,
    user_context=user_context,
    form=form,
    responses=response_strings)

Damit Sie zwischen Nutzern unterscheiden können, sollten Sie die Sendefunktion deaktivieren und stattdessen die richtige Antwort in der Ansicht für Lehrkräfte anzeigen lassen.

Route für den iFrame von „Aufgaben von Schülern/Studenten“ hinzufügen

Fügen Sie zuletzt eine Route für den iFrame mit der Aufgabe „Aufgaben von Schülern/Studenten“ hinzu. Der Name dieser Route muss mit dem Namen übereinstimmen, der beim Erstellen eines Anhangs für studentWorkReviewUri angegeben wurde. Diese Route wird geöffnet, wenn die Lehrkraft die abgegebene Aufgabe des Schülers/Studenten in der Classroom-Benotungs-UI ansieht.

Sie erhalten den Abfrageparameter submissionId, wenn Classroom den iFrame von „Aufgaben von Schülern/Studenten“ öffnet. Verwenden Sie sie, um die Arbeit des Schülers/Studenten aus Ihrer lokalen Datenbank abzurufen:

Python

In unserem Beispiel befindet sich dies in der Datei webapp/attachment_routes.py.

@app.route("/view-submission")
def view_submission():
    """
    Render a student submission using the show-student-submission.html template.
    """

    # Save the query parameters passed to the iframe in the session, just as we did
    # in previous routes. Abbreviated here for readability.
    add_iframe_query_parameters_to_session(flask.request.args)

    # For the sake of brevity in this example, we'll skip the conditional logic
    # to see if we need to authorize the user as we have done in previous steps.
    # We can assume that the user that reaches this route is a teacher that has
    # already authorized and created an attachment using the add-on.

    # In production, we recommend fully validating the user's authorization at
    # this stage as well.

    # Look up the student's submission in our database.
    student_submission = Submission.query.get(flask.session["submissionId"])

    # Look up the attachment in the database.
    attachment = Attachment.query.get(student_submission.attachment_id)

    # Render the student's response alongside the correct answer.
    return flask.render_template(
        "show-student-submission.html",
        message=f"Loaded submission {student_submission.submission_id} for "\
            f"attachment {attachment.attachment_id}.",
        student_response=student_submission.student_response,
        correct_answer=attachment.image_caption)

Add-on testen

Wiederholen Sie die Schritte zum Testen des Add-ons aus der vorherigen Schritt-für-Schritt-Anleitung. Sie sollten einen Anhang haben, der von den Lernenden geöffnet werden kann.

Führen Sie die folgenden Schritte aus, um den Aktivitätsanhang zu testen:

  • Melden Sie sich in Google Classroom als einer Ihrer Schülertestnutzer im selben Kurs wie der Lehrer-Testnutzer an.
  • Gehen Sie zum Tab Kursaufgaben und maximieren Sie die Testaufgabe Aufgabe.
  • Klicken Sie auf die Karte für Add-on-Anhänge, um die Ansicht für Schüler/Studenten zu öffnen und eine Antwort für die Aktivität zu senden.
  • Schließen Sie den iFrame nach Abschluss der Aktivität. Klicken Sie optional auf die Schaltfläche Abgeben.

Nach Abschluss der Aktivität sollte sich in Classroom nichts ändern. Testen Sie nun den iFrame für die Prüfung der Aufgaben von Schülern/Studenten:

  • Melden Sie sich in Classroom als Kursleiter-Testnutzer an.
  • Suchen Sie auf dem Tab Noten nach der Spalte für Ihre Testaufgabe. Klicken Sie auf den Namen Ihrer Testaufgabe.
  • Suchen Sie die Karte für den Testnutzer. Klicken Sie auf den Anhang auf der Karte.

Prüfen Sie, ob dem Schüler/Studenten der richtige Beitrag angezeigt wird.

Glückwunsch! Sie können nun mit dem nächsten Schritt fortfahren: Noten für Anhänge synchronisieren.