Deepseek ArtifactsDeepseek Artifacts
Back to blocks

学生10科进度记录

4.0
en教育学习进度学生管理教育工具

プロンプト

An app to record progress in 10 subjects for a student

生成結果

import React, { useState } from 'react';

const App = () => {
  const [subjects, setSubjects] = useState([
    { name: 'Mathematics', progress: 0 },
    { name: 'Science', progress: 0 },
    { name: 'History', progress: 0 },
    { name: 'Geography', progress: 0 },
    { name: 'English', progress: 0 },
    { name: 'Art', progress: 0 },
    { name: 'Physical Education', progress: 0 },
    { name: 'Music', progress: 0 },
    { name: 'Technology', progress: 0 },
    { name: 'Foreign Language', progress: 0 }
  ]);

  const updateProgress = (index, value) => {
    const newSubjects = [...subjects];
    newSubjects[index].progress = value;
    setSubjects(newSubjects);
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-100 to-purple-100 p-8">
      <h1 className="text-4xl font-bold text-center text-purple-800 mb-8">Student Progress Tracker</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {subjects.map((subject, index) => (
          <div key={index} className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
            <h2 className="text-2xl font-semibold text-purple-700 mb-4">{subject.name}</h2>
            <input
              type="range"
              min="0"
              max="100"
              value={subject.progress}
              onChange={(e) => updateProgress(index, parseInt(e.target.value))}
              className="w-full h-2 bg-purple-200 rounded-lg appearance-none cursor-pointer"
            />
            <div className="text-right text-purple-600 mt-2">{subject.progress}%</div>
          </div>
        ))}
      </div>
      <footer className="text-center text-purple-500 mt-10">
        © 2025 Progress Tracker. All rights reserved.
      </footer>
    </div>
  );
};

export default App;
Open on CodeSandboxOpen Sandbox

その他のおすすめ

すべて表示

欧洲首都儿童互动工具

教育en
4.0

create an interactive tool to teach childrens the capitals of europe

儿童教育互动学习欧洲地理2025/6/12

学习块构建应用

教育en
4.0

create a learning blocks builder application where a teacher can fill a form with lesson name and date, and click on learning blocks like the flashcard and translate blocks to a add to their lesson and once the form is saved, click on each block to configure it with the words and answers necessary. the flashcard block needs to include a start button. when it is clicked, it starts a visual countdown of 2 min. the user can review spanish vocabulary with a set of flashcards where each card shows one side with an english word and below show buttons: I know it and i don't know. the other side is displayed if the user clicks on i don't know button. this shows answer but does not award points. if user clicks on i know it button, an input field appears below, where user types the answer. include a character set where user can click on letters with an accent and other characters to insert them into their input field: á, é, í, ó, ú, ñ, ¿, ¡. in the translate block, there will be 4 sentence length input fields, each with an english sentence above. the user has to type the spanish translation of the english sentence and receive feedback as they type. word by word, correct words color in green while incorrect ones color in red. create a /data directory with .json files to store the applications data and so teacher can edit or reuse a block. create teacher friendly forms just using fields dynamically, avoid tech savvy terms like array or comma-separated values and use simple fields instead. use a php handler to post and fetch data. use this css to style application: body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #fff; padding: 20px; } h1 { background-color: #bef264; color: #000; font-size: 1.5rem; font-weight: bold; padding: 1rem 2rem; border-radius: 0.375rem; margin-bottom: 1rem; text-align: center; } p { margin: 20px; font-size: 1.25rem; line-height: 1.6; text-align: center; } #current-word { background-color: #bef264; color: #000; font-weight: bold; padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 1.5rem; display: none; } #current-word.visible { display: inline-block; } .container { display: flex; flex-wrap: wrap; max-width: 800px; justify-content: center; gap: 15px; margin: 20px auto; } .box { width: 150px; height: 150px; border: 2px solid #bef264; margin: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; user-select: none; border-radius: 0.375rem; font-size: 1.1rem; font-weight: bold; transition: all 0.3s ease; text-align: center; padding: 10px; } .box:hover { background-color: #bef264; transform: scale(1.05); } #score { font-size: 1.5rem; font-weight: bold; margin-top: 1rem; color: #000; background-color: #bef264; padding: 0.5rem 1rem; border-radius: 0.375rem; } #remaining { font-size: 1.25rem; margin-top: 0.5rem; color: #666; } consolidate this in as few files as possible to test it quickly

教育技术学习工具PHP应用2025/4/3

阿拉伯语教学经验

教育en
4.0

CREATE ME PICTURE FOR MY EXPERIENCE OF TEAHING AND I TEACH ARABIC LANGUAGE

阿拉伯语教学语言学习2025/4/2

一年级拼音互动游戏

教育en
4.0

Create an interactive phonics game designed specifically for grade one students. This educational game will help young learners practice word recognition, phonics skills, and vocabulary development through an engaging picture-word matching activity. Game Mechanics Core Gameplay The game presents a series of 10 pictures, one at a time. For each picture, students must select the correct word that matches the image from multiple options. After completing all 10 questions, students receive their final score out of 10. The game should provide immediate feedback after each answer (correct/incorrect). Include cheerful animations or sounds to celebrate correct answers and gentle encouragement for incorrect ones. User Interface Clean, colorful, and child-friendly interface with large buttons and text. Simple navigation suitable for 6-7 year old children. Clear instructions with both text and audio support. Option for teachers/parents to adjust difficulty (e.g., number of word choices, time limits). Progress indicator showing which question the student is currently on (e.g., "Question 3 of 10"). Content Requirements Picture-Word Pairs The game must include the following 10 picture-word pairs: Fig - A picture of a fig fruit Jam - A picture of fruit jam in a jar Pan - A picture of a cooking pan Pen - A picture of a writing pen Chick - A picture of a baby chicken Duck - A picture of a duck Hen - A picture of a hen Red - A picture representing the color red (e.g., a red apple) Ten - A picture representing the number ten (e.g., ten fingers or objects) Wet - A picture representing something wet (e.g., rain or water droplets) Word Options For each picture, provide 3-4 word choices that include: The correct word Words that are phonetically similar (to test phonics skills) Words that might be visually related but incorrect Example for "Duck": Duck (correct) Truck (phonetically similar) Bird (visually related but incorrect) Luck (phonetically similar) Educational Elements Learning Objectives Reinforce phonics skills for short vowel sounds Develop word recognition abilities Build vocabulary through picture-word associations Practice reading simple three-letter words Develop confidence in word identification Differentiation Easy mode: Fewer word choices (2-3) Standard mode: 3-4 word choices Challenge mode: Similar-sounding words as options Option to display letter sounds or phonetic hints Technical Requirements Platform Compatibility The game should work on tablets, computers, and interactive whiteboards. Touch-screen friendly for young users. Compatible with classroom management systems if possible. Accessibility Features Audio support for all text High contrast mode option Simplified interface option for students with special needs Adjustable game speed Assessment & Feedback Scoring System One point for each correct answer Final score displayed as "X out of 10" Celebratory animation/sound for scores of 8 or higher Encouraging message for all score levels Progress Tracking Option to save results for teacher review Simple analytics to show which words students find challenging Ability to retry the game with shuffled question order Additional Features Customization Options Ability to adjust audio volume Option to turn background music on/off Choice of themes or backgrounds Sharing Capabilities Include a sharing link feature for teachers to share the game with students Option to generate a unique link for each game session Branding & Attribution Footer must include: "Created by T. Fatma Al-Harthi" Simple, professional design that reflects educational purpose Implementation Notes Use high-quality, clear images that are easily recognizable to young children Ensure all words are displayed in a child-friendly, readable font Keep loading times minimal to maintain student engagement Include simple instructions for teachers/parents on how to use the game effectively This phonics game will provide an engaging, educational experience for grade one students while reinforcing essential early literacy skills through interactive picture-word matching activities.

拼音游戏一年级教育词汇发展2025/3/30

学生进度记录应用

教育en
4.0

An app to record progress in 10 subjects for a student. Make the number of progressing and total lessons editable Make the name of subjects editable with an "edit" icon Below each subject, make a section for units which are able to increase and decrease and able to rename

学习进度教育应用学生工具2025/3/29