课堂响应系统应用开发

4.0

2025/4/3

en软件开发课堂响应系统移动应用实时更新Ably SDK文件存储

提示语

create an application that mimics a classroom response system where the teacher sets up their class rosters and creates questions that users will answer from their mobile phones instead of clicker response pads. create a student dashboard where the student logs in using only their student id. then they are assigned a number for display purposes. once teacher starts an activity, users will see in their screens a join button. the teacher will see a top bar with boxes, each box representing a student. once all boxes are blue, meaning users have joined, the teacher can start the question and stop it. when question is ended, the results will be aggregated and displayed. fully implement the ably SDK to integrate real time updates using ably channels. use a file based storage in /data directory to store question data and user results. consolidate the code to as few files as possible to quickly test this.

生成结果

import React, { useState, useEffect } from 'react';
import * as Ably from 'ably';
import './App.css';

const App = () => {
  const [students, setStudents] = useState([]);
  const [questions, setQuestions] = useState([]);
  const [currentQuestion, setCurrentQuestion] = useState(null);
  const [studentId, setStudentId] = useState('');
  const [loggedIn, setLoggedIn] = useState(false);
  const [studentNumber, setStudentNumber] = useState(null);
  const [ably, setAbly] = useState(null);
  const [channel, setChannel] = useState(null);

  useEffect(() => {
    const ablyInstance = new Ably.Realtime.Promise({ key: 'YOUR_ABLY_API_KEY' });
    setAbly(ablyInstance);
    const channelInstance = ablyInstance.channels.get('classroom');
    setChannel(channelInstance);

    channelInstance.subscribe('studentJoined', (message) => {
      setStudents((prevStudents) => [...prevStudents, message.data]);
    });

    channelInstance.subscribe('questionStarted', (message) => {
      setCurrentQuestion(message.data);
    });

    channelInstance.subscribe('questionEnded', (message) => {
      setCurrentQuestion(null);
      setQuestions((prevQuestions) => [...prevQuestions, message.data]);
    });

    return () => {
      ablyInstance.close();
    };
  }, []);

  const handleLogin = () => {
    const number = Math.floor(Math.random() * 100);
    setStudentNumber(number);
    setLoggedIn(true);
    channel.publish('studentJoined', { id: studentId, number });
  };

  const handleJoin = () => {
    channel.publish('studentJoined', { id: studentId, number: studentNumber });
  };

  const handleStartQuestion = () => {
    channel.publish('questionStarted', { question: 'Sample Question' });
  };

  const handleEndQuestion = () => {
    channel.publish('questionEnded', { question: 'Sample Question', results: {} });
  };

  return (
    <div className="App">
      {!loggedIn ? (
        <div className="login">
          <input
            type="text"
            placeholder="Enter Student ID"
            value={studentId}
            onChange={(e) => setStudentId(e.target.value)}
          />
          <button onClick={handleLogin}>Login</button>
        </div>
      ) : (
        <div className="dashboard">
          <h1>Student Dashboard</h1>
          <p>Your Number: {studentNumber}</p>
          {currentQuestion ? (
            <div className="question">
              <h2>{currentQuestion.question}</h2>
              <button>Answer</button>
            </div>
          ) : (
            <button onClick={handleJoin}>Join</button>
          )}
        </div>
      )}
      <div className="teacher">
        <h1>Teacher Dashboard</h1>
        <div className="students">
          {students.map((student) => (
            <div key={student.id} className="student-box">
              <p>{student.number}</p>
            </div>
          ))}
        </div>
        <button onClick={handleStartQuestion}>Start Question</button>
        <button onClick={handleEndQuestion}>End Question</button>
      </div>
    </div>
  );
};

export default App;

Open Sandbox

更多推荐

查看全部

跨境会计应用开发

软件开发en

4.0

Make me an accounting application and transfer work from one country to another

会计应用跨境业务软件开发2025/6/15

Mr. Fanny Web App

软件开发en

4.0

You are an elite software engineer and full-stack developer team. Your task is to generate a full HTML/CSS/JavaScript frontend web application ready to be used as a mobile app inside WebView for Android and iOS, or published as a PWA. Project Title: **Mr. Fanny - Home Services Platform** 🌐 **Languages**: Arabic and English (toggle switch) ➡️ Must support full RTL (right-to-left) layout when Arabic is selected. ➡️ All text and interface must be dynamically switchable between Arabic and English. 👥 **User Types**: 1. Customer 2. Technician 🧩 **Pages to include**: - `index.html`: Welcome page with language selector, and role selection (Customer or Technician) - `login.html`: Login page (email/phone + password) - `register_customer.html`: Register form for customers - `register_technician.html`: Register form for technicians (includes name, area, phone, service type) - `dashboard_customer.html`: Home screen for customer: request service, track status, past requests - `dashboard_technician.html`: Technician dashboard: see available jobs, accept/reject, mark as done - `settings.html`: Switch language, change password - Optional: `admin.html`: Admin login + view all requests + statistics 🛠️ **Functionalities**: - LocalStorage-based session simulation - Store user data and service requests in localStorage - Each user sees their respective dashboard after login - Technician can mark a job as done and see commission (10%) - Customer can send new request and track it - Admin (if included) can see overall stats and control approvals 🎨 **UI Requirements**: - Responsive mobile-first design - Use icons for services (plumbing, AC, electrical, etc.) - Dark/light theme toggle (optional) - Navbar or bottom bar for navigation - Clear UX flow with no page reloads if possible (use JavaScript for transitions) 📁 **File Structure**: - /index.html - /login.html - /register_customer.html - /register_technician.html - /dashboard_customer.html - /dashboard_technician.html - /assets/css/styles.css - /assets/js/lang.js → manages dynamic language switching - /assets/js/auth.js → handles login/register/localStorage - /assets/js/dashboard.js → loads different content for each role - /assets/img/ → icons for services 💡 **Extra Features**: - Service categories shown as cards (AC, Electricity, Plumbing...) - When technician accepts request, it disappears from the global pool - Show status timeline for customer (Pending, Accepted, In Progress, Done) - Technician profile with stats (completed jobs, total earnings) 📦 **Output**: Generate all source code files inside a zipped project folder. Make sure everything is linked properly. Provide working HTML pages with realistic sample data to demonstrate flow. Bonus: Add a simple guide README.txt in English explaining the file structure and how to run the app locally (just open index.html).

Web开发PWARTL支持2025/6/13

农场预订平台项目文档

软件开发en

4.0

Important Note Before Beginning: Website design exclusively in HTML, CSS, and JS, programming exclusively in PHP, and database exclusively in MySQL. # **Farm Booking Platform Project Document - Integrated Management** ## **1. Overview** Objective: To build an integrated accounting and management system to manage farm reservations, employees, financial funds, and detailed reports. --- ## **2. Admin Dashboard Interfaces** ### **Home Page (Control Panel)** - Live Statistics: - Number of reservations (day/month/year). - Number of active employees. - Total revenues and expenses. - **Quick navigation icons** for all pages (e.g., reservation calendar, reports, add farm, etc.). ### **1. Employee Management Page** - A table with data for each employee (name, permissions, number of reservations, financial fund). - **Options**: - Delete/Disable an employee. - Modify permissions (e.g., prevent modifications to reservations). - Accept or reject job applications. ### **2. Detailed Reservations Page** - A table of all reservations with filters (by date, farm, employee). - **Actions**: - Edit/delete any reservation. - Add a manual reservation (for employees or direct customers). ### **3. Add New Reservation Page** - Form to enter: - Select the farm (from a drop-down list). - Select the date (with pre-booked dates blocked). - Customer information (name, contact information). - Attach an invoice (PDF/Print). ### **4. Financial Reports** - **Custom Reports**: - Daily/Monthly/Annual Profits. - Detailed Expenses (Expense Type, Date, Amount). - Compare Revenue vs. Expenses. - **Export**: Excel / PDF / Print. ### **5. Calendar View** - Monthly view (booked days = highlighted in blue). - **When clicking on a day**: - Reservation details (client, amount, responsible employee). - Delete/Edit option (for managers only). ### **6. Add a New Expense** - Entry Form: - Expense type (maintenance, salaries, advertising, etc.). - Amount + disbursement date. - Attach proof (image/PDF). ### **7. Add a New Farm** - Farm details: - Name, location (Google Maps), price, photos. - Days not available for booking. ### **8. Employee Funds** - **Track Due Amounts**: - For each employee: Total amounts collected from their reservations. - **"Reset Fund"** button: Archive the amount and reset to zero. - Report of financial transactions for each employee. ### **9. Backup** - Options: - Download a copy of the data (SQL/Excel). - Restore data from a previous copy. ### **10. Employee Permissions** - Define permissions for each employee: - View reservations only vs. modify them. - Access financial reports. ### **11. Login and Activity** - Record employee login dates. - Notifications for: - Unusual logins. - Failed login attempts. ### **12. Notifications** - Send alerts to the manager/employee when: - New reservation, cancellation, or modification. - Payment is received in the employee's account. --- ## **3. Employee Interface** ### **1. Join Application** - Registration Form (Name, Password). ### **2. Control Panel (After Acceptance)** - **Booking Calendar**: - View booked days (cannot be modified). - Add bookings on empty days. - **My Cashier**: - Amount to be paid to the manager. - A record of collected bookings. --- ### **B. Security:** - Data encryption (SSL). - User permissions (Roles & Permissions). - Daily backups.

农场管理PHP开发MySQL数据库2025/6/13

课堂响应系统应用开发

软件开发en

4.0

create an application that mimics a classroom response system where the teacher sets up their class rosters and creates questions that users will answer from their mobile phones instead of clicker response pads. create a student dashboard where the student logs in using only their student id. then they are assigned a number for display purposes. once teacher starts an activity, users will see in their screens a join button. the teacher will see a top bar with boxes, each box representing a student. once all boxes are blue, meaning users have joined, the teacher can start the question and stop it. when question is ended, the results will be aggregated and displayed. fully implement ably to integrate real time updates using ably channels. use a file based storage in /data directory to store question data and user results. consolidate the code to as few files as possible to quickly test this.

课堂响应系统实时更新移动应用2025/4/3

构建全功能会计系统

软件开发en

4.0

build fully accounting system that contians for : Authorization System that contians Manage user access and permissions securely. Accounting System that contians Track all financial transactions with precision. Inventory System that contians Efficiently manage product stock levels. Sales System that contians Streamline your sales process and increase revenue. Purchasing System that contians Optimize procurement and reduce costs. Human Resources Management System that contians Enhance HR tasks from recruitment to retirement using oracle developer

会计系统库存管理销售优化2025/4/2

Oracle开发全账系统

软件开发en

4.0

build fully accounting system that contians for : Authorization System Accounting System Inventory System Sales System Purchasing System Human Resources Management System using oracle developer

Oracle开发全账系统企业管理系统2025/4/2