Aktivitätstyp-Anhänge

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

In dieser Anleitung ändern Sie das Beispiel aus dem vorherigen Schritt, um einen Anhang vom Typ „Aktivität“ zu erstellen. Dabei handelt es sich um Anhänge, für die eine Einreichung von Schülern oder Studenten erforderlich ist, z. B. eine schriftliche Antwort, ein Quiz oder ein anderes von Schülern oder Studenten erstelltes Artefakt.

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

  • Rechts oben im Iframe der Schüler-/Studentenansicht wird die Schaltfläche „Abgeben“ angezeigt.
  • Sie enthalten eine eindeutige Kennung für die Arbeit von Schülern oder Studenten.
  • Die zugehörige Anhangskarte wird in der Benutzeroberfläche für die Bewertung in Classroom angezeigt.
  • Sie können eine Note für die Aufgabe festlegen, zu der sie gehören.

Im nächsten Schritt wird die Bewertung behandelt. In dieser Anleitung führen Sie folgende Schritte aus:

  • Sie ändern die vorherigen Anfragen zum Erstellen von Anhängen an die Classroom API, um einen Anhang vom Typ „Aktivität“ zu erstellen.
  • Sie implementieren einen nichtflüchtigen Speicher für Einreichungen von Schülern oder Studenten.
  • Sie ändern die vorherige Route für die Schüler-/Studentenansicht, um Eingaben von Schülern oder Studenten zu akzeptieren.
  • Sie stellen eine Route bereit, um das Iframe für die Überprüfung der Arbeit von Schülern oder Studenten bereitzustellen.

Nach Abschluss der Anleitung können Sie als Lehrkraft im angemeldeten Zustand über die Benutzeroberfläche von Google Classroom Anhänge vom Typ „Aktivität“ zu Aufgaben hinzufügen. Schüler und Studenten im Kurs können die Aktivität auch im Iframe ausführen und eine Antwort einreichen. Die Lehrkraft kann die Einreichung des Schülers oder Studenten in der Benutzeroberfläche für die Bewertung in Classroom ansehen.

Für dieses Beispiel verwenden wir die Anhangsvorlage aus der vorherigen Anleitung, die ein Bild eines berühmten Wahrzeichens und eine Bildunterschrift mit dem Namen des Wahrzeichens enthält. Die Aktivität besteht darin, den Schüler oder Studenten aufzufordern, den Namen des Wahrzeichens anzugeben.

Anfrage zum Erstellen von Anhängen ändern

Rufen Sie den Abschnitt Ihres Codes auf, in dem Sie in der vorherigen Anleitung einen Anhang vom Typ „Inhalt“ erstellt haben. Das Schlüsselelement ist hier 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 von studentWorkReviewUri bestimmt jedoch, ob der Anhang vom Typ „Aktivität“ oder vom Typ „Inhalt“ 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 Sie an dieser Anfrage vornehmen müssen, besteht darin, das Feld studentWorkReviewUri auszufüllen. Fügen Sie hier eine entsprechend benannte Route hinzu. Sie implementieren sie 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 Anhänge vom Typ „Inhalt“ hinzufügen

Erfassen Sie die Antwort des Schülers oder Studenten auf unsere Aktivität. Sie können sie später nachschlagen, wenn die Lehrkraft die Einreichung im Iframe für die Überprüfung der Arbeit von Schülern oder Studenten ansieht.

Richten Sie ein Datenbankschema für eine Submission ein. In unserem Beispiel sollen Schüler und Studenten den Namen des Wahrzeichens eingeben, das auf einem Bild zu sehen ist. Eine 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 Einreichung eines Schülers oder Studenten. Wird von Classroom zugewiesen und in der getAddOnContext Antwort in der Schüler-/Studentenansicht zurückgegeben.
  • student_response: Die Antwort des Schülers oder 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 unten in 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 Ihren Routen für die Anhangsverwaltung.

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

Ändern Sie als Nächstes die vorherige Route für die Schüler-/Studentenansicht, um ein kleines Formular anzuzeigen und Eingaben von Schülern oder Studenten zu akzeptieren. Sie können den Großteil des Codes aus der vorherigen Anleitung wiederverwenden.

Suchen Sie den Servercode, der die Route für Ihre Schüler-/Studentenansicht bereitstellt. Dies ist die Route, die beim Erstellen eines Anhangs im Feld studentViewUri angegeben wurde. Die erste Änderung besteht darin, die 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")

Möglicherweise möchten Sie auch eine Anfrage senden, um den Status der Einreichung des Schülers oder Studenten abzurufen. Die Antwort enthält einen SubmissionState-Wert, der angibt, ob der Schüler oder Student den Anhang geöffnet oder abgegeben hat. Dies kann nützlich sein, wenn Sie Änderungen an einer abgegebenen Einreichung nicht zulassen möchten oder wenn Sie Lehrkräften Einblicke in die Fortschritte ihrer Schüler oder 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 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 des Wahrzeichens an und fordern Sie den Schüler oder Studenten auf, den Namen einzugeben. Sobald eine Antwort eingeht, erfassen Sie sie 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, können Sie die Funktion zum Senden deaktivieren und stattdessen die richtige Antwort in der Lehreransicht anzeigen.

Route für das Iframe für die Überprüfung der Arbeit von Schülern oder Studenten hinzufügen

Fügen Sie schließlich eine Route hinzu, um das Iframe für die Überprüfung der Arbeit von Schülern oder Studenten bereitzustellen. 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 Einreichung des Schülers oder Studenten in der Benutzeroberfläche für die Bewertung in Classroom ansieht.

Sie erhalten den Abfrageparameter submissionId, wenn Classroom das Iframe für die Überprüfung der Arbeit von Schülern oder Studenten öffnet. Verwenden Sie ihn, um die Arbeit des Schülers oder 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 testen aus der vorherigen Anleitung. Sie sollten einen Anhang haben, der vom Schüler oder Studenten geöffnet werden kann.

Führen Sie die folgenden Schritte aus, um den Anhang vom Typ „Aktivität“ zu testen:

  • Melden Sie sich in Google Classroom als einer Ihrer Testnutzer für Schüler/Studenten im selben Kurs wie der Testnutzer für die Lehrkraft an.
  • Rufen Sie den Tab Kursaufgaben auf und maximieren Sie die Testaufgabe.
  • Klicken Sie auf die Anhangskarte des Add-ons , um die Schüler-/Studentenansicht zu öffnen und eine Antwort für die Aktivität einzureichen.
  • Schließen Sie das Iframe, nachdem Sie die Aktivität abgeschlossen haben. Optional können Sie auf die Schaltfläche Abgeben klicken.

Nach Abschluss der Aktivität sollte sich in Classroom nichts ändern. Testen Sie nun das Iframe für die Überprüfung der Arbeit von Schülern oder Studenten:

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

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

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