小学生プログラミング教室

4.0

2025/6/13

ja教育小学生プログラミングそろばん

プロンプト

小学生向けのプログラミング・そろばん教室、ワンダースタジオのhttps://wonderstudio.info/のランディングページを作ってください。

生成結果

import React from 'react';

export default function App() {
  return (
    <div className="min-h-screen bg-gradient-to-r from-blue-100 to-purple-100">
      {/* Navigation */}
      <nav className="p-6 bg-white shadow-md">
        <div className="container mx-auto flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">Wonder Studio</h1>
          <ul className="flex space-x-6">
            <li><a href="#home" className="text-gray-700 hover:text-blue-600">Home</a></li>
            <li><a href="#about" className="text-gray-700 hover:text-blue-600">About</a></li>
            <li><a href="#courses" className="text-gray-700 hover:text-blue-600">Courses</a></li>
            <li><a href="#contact" className="text-gray-700 hover:text-blue-600">Contact</a></li>
          </ul>
        </div>
      </nav>

      {/* Hero Section */}
      <section id="home" className="py-20 bg-blue-50">
        <div className="container mx-auto text-center">
          <h2 className="text-5xl font-bold text-blue-900 mb-6">Welcome to Wonder Studio</h2>
          <p className="text-xl text-gray-700 mb-8">Empowering young minds with programming and abacus skills.</p>
          <a href="#courses" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Explore Courses</a>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-20">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">About Us</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div>
              <img src="https://placehold.co/600x400" alt="About Us" className="rounded-lg shadow-lg" />
            </div>
            <div className="flex flex-col justify-center">
              <p className="text-gray-700 mb-4">Wonder Studio is dedicated to nurturing the creativity and analytical skills of children through programming and abacus classes. Our experienced instructors ensure a fun and engaging learning environment.</p>
              <p className="text-gray-700">Join us and watch your child's potential unfold!</p>
            </div>
          </div>
        </div>
      </section>

      {/* Courses Section */}
      <section id="courses" className="py-20 bg-blue-50">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">Our Courses</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Programming Basics</h3>
              <p className="text-gray-700 mb-4">Introduction to programming concepts with fun projects.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Advanced Coding</h3>
              <p className="text-gray-700 mb-4">Dive deeper into coding with advanced techniques.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-lg">
              <h3 className="text-2xl font-bold text-blue-900 mb-4">Abacus Mastery</h3>
              <p className="text-gray-700 mb-4">Master the ancient art of abacus for mental math.</p>
              <a href="#" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Learn More</a>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20">
        <div className="container mx-auto">
          <h2 className="text-4xl font-bold text-blue-900 text-center mb-10">Contact Us</h2>
          <form className="max-w-lg mx-auto">
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="name">Name</label>
              <input type="text" id="name" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="email">Email</label>
              <input type="email" id="email" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-6">
              <label className="block text-gray-700 mb-2" htmlFor="message">Message</label>
              <textarea id="message" className="w-full px-4 py-2 border rounded-lg" rows="4"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Send Message</button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white py-10">
        <div className="container mx-auto text-center">
          <p className="text-gray-700">&copy; 2025 Wonder Studio. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}

Open 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

学生10科进度记录

教育en

4.0

An app to record progress in 10 subjects for a student

学习进度学生管理教育工具2025/3/29