ไฟล์แนบประเภทกิจกรรม

นี่คือวิดีโอวิดีโอที่ 5 ในชุดวิดีโอแนะนำส่วนเสริมของ Classroom

ในคำแนะนำแบบทีละขั้นนี้ คุณจะแก้ไขตัวอย่างจากขั้นตอนคำแนะนำแบบทีละขั้นก่อนหน้า เพื่อสร้างไฟล์แนบประเภทกิจกรรม ไฟล์แนบเหล่านี้เป็นไฟล์แนบที่ต้องให้นักเรียนส่ง เช่น คำตอบที่เขียน แบบทดสอบ หรืออาร์ติแฟกต์อื่นๆ ที่นักเรียนสร้างขึ้น

การแยกความแตกต่างระหว่างไฟล์แนบประเภทเนื้อหากับประเภทกิจกรรมเป็นสิ่งสำคัญ สิ่งที่แนบมาประเภทกิจกรรมจะแตกต่างจากประเภทเนื้อหาดังนี้

  • ปุ่ม "ส่ง" จะปรากฏที่ด้านขวาบนของ iframe มุมมองของนักเรียน
  • โดยจะระบุตัวระบุที่ไม่ซ้ำกันสำหรับงานของนักเรียน/นักศึกษา
  • การ์ดไฟล์แนบจะปรากฏใน UI ของเครื่องมือตัดเกรดของ Classroom
  • โดยสามารถกำหนดคะแนนสำหรับงานที่ตนเองเป็นเจ้าของได้

ดูข้อมูลเกี่ยวกับการให้คะแนนได้ในคำแนะนำแบบทีละขั้นตอนถัดไป ในวิดีโอ วอล์กทรูนี้ คุณจะทำสิ่งต่อไปนี้

  • แก้ไขคำขอก่อนหน้าในการสร้างไฟล์แนบไปยัง Classroom API เพื่อสร้างไฟล์แนบประเภทกิจกรรม
  • ใช้พื้นที่เก็บข้อมูลถาวรสำหรับการส่งงานของนักเรียน
  • แก้ไขเส้นทางมุมมองของนักเรียนก่อนหน้าเพื่อยอมรับข้อมูลที่นักเรียนป้อน
  • ระบุเส้นทางเพื่อแสดง iframe ของการตรวจงานของนักเรียน

เมื่อเสร็จแล้ว คุณจะสร้างไฟล์แนบประเภทกิจกรรมในงานผ่าน UI ของ Google Classroom ได้เมื่อเข้าสู่ระบบในฐานะครู นักเรียนในชั้นเรียนยังสามารถทำกิจกรรมใน iframe และส่งคำตอบได้ด้วย ครูสามารถ ดูงานที่นักเรียนส่งใน UI การให้คะแนนของ Classroom ได้

สำหรับตัวอย่างนี้ ให้ใช้เทมเพลตไฟล์แนบจากคำแนะนำแบบทีละขั้นตอนก่อนหน้า ซึ่งแสดงรูปภาพของสถานที่สำคัญที่มีชื่อเสียงและคำบรรยายพร้อมชื่อสถานที่สำคัญ กิจกรรมนี้ประกอบด้วยการแจ้งให้นักเรียน ระบุชื่อสถานที่สำคัญ

แก้ไขคำขอสร้างไฟล์แนบ

ไปที่ส่วนของโค้ดที่คุณสร้างไฟล์แนบประเภทเนื้อหา ในการแนะนำแบบทีละขั้นตอนก่อนหน้า รายการสำคัญในที่นี้คืออินสแตนซ์ของออบเจ็กต์ AddOnAttachment ซึ่งก่อนหน้านี้เราได้ระบุ teacherViewUri, studentViewUri และ title สำหรับไฟล์แนบ

แม้ว่าไฟล์แนบของส่วนเสริมทั้งหมดจะต้องมี 3 ฟิลด์นี้ แต่การมีหรือไม่มีstudentWorkReviewUriจะเป็นตัวกำหนดว่าไฟล์แนบเป็นประเภทกิจกรรมหรือประเภทเนื้อหา CREATEคำขอที่มีstudentWorkReviewUriCREATEstudentWorkReviewUriจะกลายเป็นไฟล์แนบประเภทกิจกรรม ส่วนคำขอ CREATECREATEstudentWorkReviewUri ที่ไม่มี studentWorkReviewUri จะกลายเป็นไฟล์แนบประเภทเนื้อหา

การแก้ไขเพียงอย่างเดียวที่ต้องทำกับคำขอนี้คือการป้อนข้อมูลในฟิลด์ studentWorkReviewUri เพิ่มเส้นทางที่มีชื่อเหมาะสมที่นี่ โดยคุณจะ นำไปใช้ในขั้นตอนถัดไป

Python

ในตัวอย่างที่เราให้ไว้ ข้อมูลนี้จะอยู่ในcreate_attachmentsเมธอดในไฟล์ 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}",
}

เพิ่มพื้นที่เก็บข้อมูลถาวรสำหรับไฟล์แนบประเภทเนื้อหา

บันทึกคำตอบของนักเรียน/นักศึกษาในกิจกรรมของเรา คุณสามารถค้นหาได้ในภายหลังเมื่อครูดูงานที่ส่งใน iframe ของการตรวจงานของนักเรียน

ตั้งค่าสคีมาฐานข้อมูลสำหรับ Submission ตัวอย่างที่เราให้ไว้คาดหวังว่า นักเรียนจะป้อนชื่อสถานที่สำคัญที่แสดงในรูปภาพ ดังนั้น Submission จึงมีแอตทริบิวต์ต่อไปนี้

  • attachment_id: ตัวระบุที่ไม่ซ้ำกันสำหรับไฟล์แนบ กำหนดโดย Classroom และส่งคืนในการตอบกลับเมื่อสร้างไฟล์แนบ
  • submission_id: ตัวระบุสำหรับการส่งงานของนักเรียน/นักศึกษา มอบหมายโดย Classroom และส่งคืนในgetAddOnContextการตอบกลับในมุมมองของนักเรียน
  • student_response: คำตอบที่นักเรียนระบุ

Python

ขยายการใช้งาน SQLite และ flask_sqlalchemy จากขั้นตอนก่อนหน้า

ไปที่ไฟล์ที่คุณกำหนดตารางก่อนหน้า (models.py หากคุณทำตามตัวอย่างที่เราให้ไว้) เพิ่มข้อมูลต่อไปนี้ที่ด้านล่างของไฟล์

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

นำเข้าคลาส Submission ใหม่ลงในไฟล์เซิร์ฟเวอร์พร้อมเส้นทางการจัดการไฟล์แนบ

แก้ไขเส้นทางมุมมองสำหรับนักเรียน

จากนั้น ให้แก้ไขเส้นทางมุมมองนักเรียนก่อนหน้าเพื่อแสดงแบบฟอร์มขนาดเล็กและยอมรับ อินพุตจากนักเรียน คุณสามารถนำโค้ดส่วนใหญ่จาก คำแนะนำแบบทีละขั้นตอนก่อนหน้ามาใช้ซ้ำได้

ค้นหารหัสเซิร์ฟเวอร์ที่ระบุเส้นทางสำหรับมุมมองนักเรียน นี่คือ เส้นทางที่ระบุในฟิลด์ studentViewUri เมื่อสร้างไฟล์แนบ การเปลี่ยนแปลงแรกที่ต้องทำคือการแยก submissionId จากgetAddOnContext การตอบกลับ

Python

ในตัวอย่างที่เราให้ไว้ ฟังก์ชันนี้จะอยู่ในเมธอด load_activity_attachment ในไฟล์ 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")

นอกจากนี้ คุณอาจต้องส่งคำขอเพื่อดูสถานะการส่งงานของนักเรียนด้วย คำตอบจะมีค่า SubmissionState ซึ่งระบุสถานะต่างๆ เช่น นักเรียน/นักศึกษาเปิดไฟล์แนบหรือส่งงานแล้วหรือไม่ ซึ่งอาจเป็นประโยชน์ในกรณีที่คุณต้องการไม่อนุญาตให้แก้ไขงานที่ส่งแล้ว หรือหากคุณสนใจที่จะให้ข้อมูลเชิงลึกแก่ครูเกี่ยวกับความคืบหน้าของนักเรียน

Python

ในตัวอย่างที่เราให้ไว้ นี่คือส่วนต่อจาก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()

สุดท้าย ให้ดึงข้อมูลไฟล์แนบจากฐานข้อมูลของเราและแสดงแบบฟอร์มอินพุต แบบฟอร์มในตัวอย่างที่เราให้ประกอบด้วยช่องป้อนข้อมูลสตริงและ ปุ่มส่ง แสดงรูปภาพสถานที่สำคัญและแจ้งให้นักเรียนป้อนชื่อ เมื่อได้รับคำตอบแล้ว ให้บันทึกลงในฐานข้อมูลของเรา

Python

ในตัวอย่างที่เราให้ไว้ นี่คือส่วนต่อจาก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)

หากต้องการแยกความแตกต่างระหว่างผู้ใช้ ให้พิจารณาปิดใช้ฟังก์ชันส่ง และแสดงคำตอบที่ถูกต้องในมุมมองของครูแทน

เพิ่มเส้นทางสำหรับ iframe ของการตรวจสอบงานของนักเรียน

สุดท้าย ให้เพิ่มเส้นทางเพื่อแสดง iframe ของการตรวจสอบงานของนักเรียน ชื่อของเส้นทางนี้ ควรตรงกับชื่อที่ระบุสำหรับ studentWorkReviewUri เมื่อสร้าง สิ่งที่แนบ เส้นทางนี้จะเปิดขึ้นเมื่อครูดูงานที่นักเรียนส่งใน UI ของเครื่องมือให้คะแนนใน Classroom

คุณจะได้รับพารามิเตอร์การค้นหา submissionId เมื่อ Classroom เปิด iframe การตรวจสอบงานของนักเรียน ใช้เพื่อดึงงานของนักเรียนจากฐานข้อมูลในเครื่องของคุณโดยทำดังนี้

Python

ในตัวอย่างที่เราให้ไว้ ข้อมูลนี้จะอยู่ในไฟล์ 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)

ทดสอบส่วนเสริม

ทำขั้นตอนการทดสอบส่วนเสริมจากวอล์กทรูที่ผ่านมาซ้ำ คุณควร มีไฟล์แนบที่นักเรียนเปิดได้

ทำตามขั้นตอนต่อไปนี้เพื่อทดสอบไฟล์แนบกิจกรรม

  • ลงชื่อเข้าใช้ Google Classroom ในฐานะผู้ใช้ทดสอบที่เป็นนักเรียนในชั้นเรียนเดียวกับผู้ใช้ทดสอบที่เป็นครู
  • ไปที่แท็บงานของชั้นเรียน แล้วขยายงานทดสอบ
  • คลิกการ์ดไฟล์แนบของส่วนเสริมเพื่อเปิดมุมมองของนักเรียน/นักศึกษาและส่งคำตอบสำหรับกิจกรรม
  • ปิด iframe หลังจากทำกิจกรรมเสร็จแล้ว หรือคลิกปุ่มส่ง

คุณไม่ควรเห็นการเปลี่ยนแปลงใดๆ ใน Classroom หลังจากทำกิจกรรมเสร็จสมบูรณ์ ตอนนี้ให้ทดสอบ iframe ของการตรวจงานของนักเรียนโดยทำดังนี้

  • ลงชื่อเข้าใช้ Classroom ในฐานะผู้ใช้ทดสอบที่เป็นครู
  • ค้นหาคอลัมน์ของงานทดสอบในแท็บคะแนน คลิก ชื่อของงานทดสอบ
  • ค้นหาการ์ดสำหรับผู้ใช้ที่เป็นนักเรียนทดสอบ คลิกไฟล์แนบบนการ์ด

ตรวจสอบว่างานที่ส่งถูกต้องปรากฏต่อนักเรียน/นักศึกษา

ยินดีด้วย คุณพร้อมที่จะไปยังขั้นตอนถัดไปแล้ว นั่นคือการซิงค์คะแนน ไฟล์แนบ