Aktivitätstyp-Anhänge

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

In dieser Schritt-für-Schritt-Anleitung ändern Sie das Beispiel aus der vorherigen Schritt-für-Schritt-Anleitung, um einen Anhang vom Typ Aktivitätstyp zu erstellen. Das sind alle Anhänge, die eine schriftliche Antwort von Schülern/Studenten erfordern, z. B. eine schriftliche Antwort, ein Quiz oder ein anderes von Schülern/Studenten generiertes Artefakt.

Die Unterscheidung zwischen Inhaltstypen und Anhängen von Aktivitäten ist wichtig. Aktivitätsanhänge unterscheiden sich in folgenden Punkten vom Inhaltstyp:

  • Rechts oben im iFrame der Schüleransicht wird die Schaltfläche „Abgeben“ angezeigt.
  • Damit werden die Aufgaben von Schülern und Studenten eindeutig gekennzeichnet.
  • Die Karte mit dem Anhang wird auf der Benutzeroberfläche des Classroom-Benoters angezeigt.
  • Sie können für die Aufgabe, zu der sie gehören, eine Note festlegen.

Sehen Sie sich die nächste Schritt-für-Schritt-Anleitung zum Benoten an. Im Verlauf dieser Schritt-für-Schritt-Anleitung führen Sie Folgendes aus:

  • Ändern Sie die vorherigen Anfragen zum Erstellen von Anhängen an die Classroom API, um einen Anhang vom Typ „Aktivität“ zu erstellen.
  • Implementieren Sie dauerhaften Speicher für abgegebene Aufgaben.
  • Ändern Sie die vorherige Route für die Schüler-/Studentenansicht so, dass die Eingaben der Schüler oder Studenten akzeptiert werden.
  • Geben Sie eine Route für den iFrame an, über den Schüler/Studenten Aufgaben überprüfen können.

Wenn Sie als Lehrkraft angemeldet sind, können Sie über die Google Classroom-Benutzeroberfläche Anhänge im Aktivitätstyp zu Aufgaben erstellen. Die Kursteilnehmer können 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 enthält. Bei dieser Aktivität werden Sie aufgefordert, den Namen der Sehenswürdigkeit anzugeben.

Anfrage zum Erstellen von Anhängen ändern

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

Diese drei Felder sind für alle Add-on-Anhänge erforderlich. Das Vorhandensein oder Fehlen eines studentWorkReviewUri bestimmt jedoch, ob der Anhang einen Aktivitäts- oder Inhaltstyp hat. Eine CREATE-Anfrage mit einem ausgefüllten studentWorkReviewUri wird zu einem Anhang vom Typ „Aktivität“, während eine CREATE-Anfrage ohne studentWorkReviewUri zu einem Inhaltstypenanhang wird.

Die einzige Änderung, die Sie an dieser Anfrage vornehmen müssen, besteht darin, das Feld studentWorkReviewUri auszufüllen. Fügen Sie hier eine entsprechend benannte Route hinzu. Die Implementierung erfolgt 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}",
}

Nichtflüchtigen Speicher für Inhaltstyp-Anhänge hinzufügen

Zeichnen Sie die Antwort des Schülers/Studenten auf unsere Aktivität auf. Sie können sie später noch einmal aufrufen, wenn die Lehrkraft die Aufgabe im iFrame „Aufgabenprüfung für Schüler/Studenten“ ansieht.

Richten Sie ein Datenbankschema für eine Submission ein. In unserem Beispiel geben die Schüler den Namen der auf dem Bild angezeigten Sehenswürdigkeit ein. 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 ID für die Aufgabe eines Schülers/Studenten. Von Classroom zugewiesen und in der Ansicht für Schüler/Studenten in der getAddOnContext-Antwort zurückgegeben.
  • student_response: die Antwort des Schülers/Studenten.

Python

Erweitern Sie die SQLite- und flask_sqlalchemy-Implementierung der vorherigen Schritte.

Rufen Sie die Datei auf, in der Sie die vorherigen Tabellen definiert haben (models.py, wenn Sie dem bereitgestellten 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 Submission-Klasse mit den Routen, die die Anhänge verarbeiten, in die Serverdatei.

Route für die Schüleransicht ändern

Ändern Sie als Nächstes die vorherige Route für die Schüler-/Studentenansicht, sodass ein kleines Formular angezeigt wird und die Eingaben der Schüler oder Studenten akzeptiert werden. 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üleransicht bereitstellt. Dies ist die Route, die beim Erstellen eines Anhangs im Feld studentViewUri angegeben wird. Die erste Änderung, die Sie vornehmen müssen, besteht darin, das submissionId aus der getAddOnContext-Antwort zu 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 stellen, um den Status der Schüler/Studenten zu erhalten. Die Antwort enthält einen SubmissionState-Wert, der angibt, ob der Schüler oder Student den Anhang geöffnet oder abgegeben hat. Das kann nützlich sein, wenn Sie Änderungen an abgegebenen Aufgaben nicht zulassen möchten oder wenn Sie Lehrkräften Informationen zum Fortschritt ihrer Schüler/Studenten geben möchten:

Python

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

# 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 Informationen zum Anhang 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 an und bitten Sie den Schüler, seinen Namen einzugeben. Sobald eine Antwort vorliegt, speichere sie in unserer Datenbank.

Python

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

# 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)

Um zwischen Nutzern zu unterscheiden, sollten Sie die Senden-Funktion deaktivieren und stattdessen die richtige Antwort in der Lehreransicht anzeigen lassen.

Route für den iFrame für die Prüfung der Aufgabe von Schülern/Studenten hinzufügen

Fügen Sie zuletzt eine Route für den iFrame für die Prüfung der Aufgaben von Schülern/Studenten hinzu. Der Name dieser Route sollte 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-Benutzeroberfläche für die Benotung sieht.

Sie erhalten den Abfrageparameter submissionId, wenn Classroom den iFrame für die Prüfung der 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 unter Add-on-Schritte aus der vorherigen Schritt-für-Schritt-Anleitung testen. Sie sollten einen Anhang haben, den der Schüler oder Student öffnen kann.

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

  • Melden Sie sich als einer Ihrer Schüler-/Studententestnutzer in Google Classroom an, die sich im selben Kurs wie der Lehrkraft-Testnutzer befinden.
  • Gehen Sie zum Tab Kursaufgaben und maximieren Sie den Test 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, nachdem Sie die Aktivität abgeschlossen haben. Klicken Sie optional auf die Schaltfläche Abgeben.

Nachdem Sie diese Aktivität abgeschlossen haben, sollte sich in Classroom nichts ändern. Testen Sie jetzt den iFrame für die Prüfung der Aufgaben von Schülern/Studenten:

  • Melden Sie sich als Kursleiter-Testnutzer in Classroom 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 Testteilnehmer. Klicken Sie auf der Karte auf den Anhang.

Vergewissern Sie sich, dass dem Schüler/Studenten die richtige Aufgabe angezeigt wird.

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