Aktivitätstyp-Anhänge

Dies ist die fünfte Anleitung in der Reihe von Anleitungen zu Classroom-Add-ons.

In dieser Anleitung ändern Sie das Beispiel aus dem vorherigen Schritt, um eine Anhang vom Typ „Aktivität“ zu erstellen. Dazu gehören alle Anhänge, für die eine Einreichung durch die Schüler erforderlich ist, z. B. eine schriftliche Antwort, ein Quiz oder ein anderes von Schülern erstelltes Artefakt.

Es ist wichtig, zwischen Anhängen vom Typ „Inhalt“ und „Aktivität“ zu unterscheiden. Anhänge vom Aktivitätstyp unterscheiden sich in folgenden Punkten von Anhängen vom Inhaltstyp:

  • Rechts oben im iFrame der Schüleransicht wird die Schaltfläche „Abgeben“ angezeigt.
  • Sie stellen eine eindeutige Kennung für die Arbeit von Schülern und Studenten bereit.
  • Die Karte mit der Anlage wird in der Benutzeroberfläche des Classroom-Benotungstools angezeigt.
  • Sie können eine Note für die Aufgabe festlegen, zu der sie gehören.

Im nächsten Walkthrough wird die Benotung erläutert. In dieser Anleitung führen Sie die folgenden Schritte 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 nichtflüchtigen Speicher für die Einreichungen der Lernenden.
  • Ändern Sie die vorherige Route für die Schüleransicht, damit Eingaben von Schülern und Studenten akzeptiert werden.
  • Geben Sie einen Pfad an, über den das iFrame für die Überprüfung von Schülerarbeiten bereitgestellt werden kann.

Anschließend können Sie Aufgabenanhänge vom Typ „Aktivität“ über die Google Classroom-Benutzeroberfläche erstellen, wenn Sie als Lehrkraft angemeldet sind. Schüler und Studenten im Kurs können die Aktivität auch im iFrame erledigen und eine Antwort senden. Die Lehrkraft kann die eingereichte Aufgabe des Schülers/Studenten in der Classroom-Benutzeroberfläche für die Benotung ansehen.

Für dieses Beispiel verwenden wir die Anhängevorlage aus der vorherigen Anleitung, die ein Bild eines berühmten Wahrzeichens und eine Bildunterschrift mit dem Namen des Wahrzeichens enthält. Bei der Aktivität wird der Schüler aufgefordert, den Namen des Wahrzeichens anzugeben.

Anfrage zum Erstellen von Anhängen ändern

Rufen Sie den Abschnitt Ihres Codes auf, in dem Sie im vorherigen Walkthrough eine Anlage vom Typ „content-type“ erstellt haben. Das Schlüsselelement ist eine Instanz eines AddOnAttachment-Objekts, in dem wir zuvor teacherViewUri, studentViewUri und title für den Anhang angegeben haben.

Alle Add-on-Anhänge erfordern diese drei Felder. Das Vorhandensein oder Fehlen eines studentWorkReviewUri bestimmt, ob der Anhang aktivitäts- oder inhaltstypbezogen ist. 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 Anhang vom Typ „Inhalt“ wird.

Die einzige Änderung, die an dieser Anfrage vorgenommen werden muss, ist das Ausfüllen des Felds studentWorkReviewUri. Fügen Sie hier eine Route mit einem passenden Namen hinzu. Sie wird in einem späteren Schritt implementiert.

Python

In unserem Beispiel befindet sich der Code 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 Anhänge vom Typ „content-type“ hinzufügen

Notieren Sie die Reaktion des Schülers auf unsere Aktivität. Sie können sie später nachschlagen, wenn die Lehrkraft die Aufgabe im iFrame „Arbeiten von Schülern/Studenten überprüfen“ aufruft.

Richten Sie ein Datenbankschema für eine Submission ein. In unserem Beispiel sollen die Lernenden den Namen der Sehenswürdigkeit eingeben, die auf einem Bild zu sehen ist. Ein Submission enthält daher die folgenden Attribute:

  • attachment_id: Eine eindeutige Kennung für einen Anhang. Wird von Classroom zugewiesen und in der Antwort zurückgegeben, wenn ein Anhang erstellt wird.
  • submission_id: Eine Kennung für eine Schülerarbeit. Von Classroom zugewiesen und in der getAddOnContext-Antwort in der Schüleransicht 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 Submission-Klasse in die Serverdatei mit Ihren Routen für die Verarbeitung von Anhängen.

Route in der Schüleransicht ändern

Ändern Sie als Nächstes die vorherige Student View-Route, um ein kleines Formular anzuzeigen und Eingaben von Lernenden zu akzeptieren. Sie können den Großteil des Codes aus dem vorherigen Walkthrough wiederverwenden.

Suchen Sie den Servercode, der die Route für die Schüleransicht enthält. Dies ist die Route, die beim Erstellen eines Anhangs im Feld studentViewUri angegeben wird. Als Erstes müssen wir die submissionId aus der getAddOnContext-Antwort extrahieren.

Python

In unserem Beispiel befindet sich dieser 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")

Möglicherweise möchten Sie auch eine Anfrage zum Abrufen des Status der Aufgabenabgabe von Schülern/Studenten senden. Die Antwort enthält einen SubmissionState-Wert, der den Status angibt, z. B. ob der Schüler oder Student die Anlage geöffnet oder abgegeben hat. Das kann nützlich sein, wenn Sie Änderungen an einer abgegebenen Aufgabe nicht zulassen möchten oder wenn Sie Lehrkräften Einblicke in die Fortschritte ihrer Schüler und Studenten geben möchten:

Python

In unserem Beispiel ist dies eine Fortsetzung der Methode load_activity_attachment 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 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 des Wahrzeichens und fordern Sie den Schüler auf, den Namen einzugeben. Sobald sie eine Antwort geben, erfassen Sie diese in unserer Datenbank.

Python

In unserem Beispiel ist dies eine Fortsetzung der Methode load_activity_attachment 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)

Um zwischen Nutzern zu unterscheiden, sollten Sie die Funktion zum Einreichen deaktivieren und stattdessen die richtige Antwort in der Ansicht für Lehrkräfte anzeigen.

Route für das Iframe „Aufgabenüberprüfung“ hinzufügen

Fügen Sie zum Schluss eine Route hinzu, um das Iframe für die Überprüfung von Schülerarbeiten bereitzustellen. Der Name dieser Route sollte mit dem Namen übereinstimmen, der für studentWorkReviewUri beim Erstellen einer Anlage angegeben wurde. Dieser Pfad wird geöffnet, wenn die Lehrkraft die von Schülern oder Studenten eingereichte Aufgabe in der Benutzeroberfläche des Classroom-Benotungstools aufruft.

Sie erhalten den Abfrageparameter submissionId, wenn in Classroom das iframe für die Überprüfung von Aufgaben von Schülern/Studenten geöffnet wird. Damit können Sie die Arbeit des Schülers aus Ihrer lokalen Datenbank abrufen:

Python

In unserem Beispiel befindet sich diese 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 dem vorherigen Walkthrough. Sie sollten eine Anlage haben, die vom Schüler/Studenten geöffnet werden kann.

Führen Sie die folgenden Schritte aus, um die Aktivitätsanhänge zu testen:

  • Melden Sie sich in Google Classroom als einer Ihrer Schüler-/Studenten-Testnutzer in derselben Klasse wie der Lehrkraft-Testnutzer an.
  • Gehen Sie zum Tab Kursaufgaben und maximieren Sie die Aufgabe für den Test.
  • Klicken Sie auf die Add-on-Anhangskarte, um die Schüleransicht zu öffnen und eine Antwort für die Aktivität einzureichen.
  • Schließen Sie das iFrame, nachdem Sie die Aktivität abgeschlossen haben. Klicken Sie optional auf die Schaltfläche Abgeben.

Nach Abschluss der Aktivität sollte sich in Classroom nichts ändern. Testen Sie nun das iFrame für die Überprüfung von Schüler- und Studentenaufgaben:

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

Prüfen Sie, ob die richtige Aufgabe für den Schüler angezeigt wird.

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