Cara mereka bentuk sistem yang menyokong interaksi masa nyata dalam menjawab soalan dalam talian

Cara mereka bentuk sistem yang menyokong interaksi masa nyata dalam menjawab soalan dalam talian

Dengan perkembangan Internet, pembelajaran dalam talian telah menjadi gaya pembelajaran biasa. Kemunculan platform menjawab soalan dalam talian telah menjadikan pembelajaran lebih fleksibel dan mudah. Walau bagaimanapun, kebanyakan platform menjawab soalan dalam talian semasa hanya menyediakan fungsi menjawab soalan yang mudah dan tidak menyedari interaksi masa nyata. Untuk memenuhi keperluan pelajar untuk pengalaman pembelajaran yang lebih kaya dan lebih pelbagai, kami perlu mereka bentuk sistem menjawab soalan dalam talian yang menyokong interaksi masa nyata.

Untuk mencapai matlamat ini, kami boleh menggunakan websocket untuk mencapai penghantaran data masa nyata, dan menggunakan seni bina pemisah bahagian hadapan dan bahagian belakang menggunakan React.js untuk membina antara muka pengguna, dan bahagian belakang menggunakan Node.js untuk membina pelayan dan menggunakan MongoDB sebagai pangkalan data.

Pertama sekali, kita perlu mereka bentuk struktur pangkalan data untuk menyimpan soalan dan rekod jawapan. Anda boleh membuat dua koleksi, satu untuk menyimpan maklumat soalan dan satu lagi untuk menyimpan rekod jawapan. Koleksi soalan boleh mengandungi medan seperti berikut:

{
  _id: ObjectId,
  question: String,
  options: [String],
  answer: String
}

Koleksi rekod jawapan boleh mengandungi medan seperti berikut:

{
  _id: ObjectId,
  userId: String,
  questionId: ObjectId,
  answer: String,
  correct: Boolean
}

Seterusnya, kami perlu menulis API back-end untuk menyediakan soalan dan rekod jawapan Tambah, padam, ubah suai dan semak fungsi. Sebagai contoh, kita boleh mencipta antara muka API berikut:

• GET /api/questions: Dapatkan senarai semua soalan
• GET /api/questions/{ questionId}: Dapatkan maklumat terperinci bagi soalan yang dinyatakan
• POST /api/questions: Buat soalan baharu
• PUT /api/questions/{questionId}: Kemas kini maklumat soalan yang ditentukan
• DELETE /api/questions/{questionId}: Padamkan soalan yang ditentukan
• GET /api/records: Dapatkan senarai semua rekod jawapan
• GET /api/records/ {recordId}: Dapatkan maklumat terperinci rekod jawapan yang ditentukan
• POST /api/records: Cipta rekod jawapan baharu
• PUT /api/records/{recordId}: Kemas kini jawapan yang ditentukan Maklumat rekod jawapan
• DELETE /api/records/{recordId}: Padamkan rekod jawapan yang ditentukan

import React, { useState, useEffect } from 'react';

const Quiz = () => {
  const [questions, setQuestions] = useState([]);
  const [answered, setAnswered] = useState(false);
  const [answer, setAnswer] = useState('');

  useEffect(() => {
    fetch('/api/questions')
      .then(response => response.json())
      .then(data => setQuestions(data));
  }, []);

  const handleSubmit = () => {
    fetch('/api/records', {
      method: 'POST',
      body: JSON.stringify({ answer }),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(response => response.json())
      .then(data => {
        setAnswered(true);
        // 更新其他用户的答题情况
      });
  };

  return (
    <div>
      <h1>在线答题</h1>
      {questions.map(question => (
        <div key={question._id}>
          <h3>{question.question}</h3>
          {question.options.map(option => (
            <div key={option}>
              <input
                type="radio"
                id={option}
                name="answer"
                value={option}
                onChange={e => setAnswer(e.target.value)}
                disabled={answered}
              />
              <label htmlFor={option}>{option}</label>
            </div>
          ))}
        </div>
      ))}
      {!answered && (
        <button onClick={handleSubmit}>提交答案</button>
      )}
    </div>
  );
};

export default Quiz;

Atas ialah kandungan terperinci Cara mereka bentuk sistem yang menyokong interaksi masa nyata dalam menjawab soalan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!