93:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"SWRDataProvider"] 95:T1f4d,[V0_FILE]typescriptreact:file="app/components/ProfileForm.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" export function ProfileForm({ onSubmit }: { onSubmit: (data: any) => void }) { const [formData, setFormData] = useState({ name: "", role: "", interests: "", learningStyle: "", }) const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit(formData) } return (

Name

Role (Student/Teacher)

Interests

</div>
      <div>
        <Label htmlFor="learningStyle">Learning Style</Label>
        <Input
          id="learningStyle"
          name="learningStyle"
          value={formData.learningStyle}
          onChange={handleChange}
          required
        />
      </div>
      <Button type="submit">Submit Profile</Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/components/LessonForm.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function LessonForm({ onSubmit }: { onSubmit: (data: any) => void }) {
  const [formData, setFormData] = useState({
    title: "",
    subject: "",
    goals: "",
    desiredOutputs: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <Label htmlFor="title">Lesson Title</Label>
        <Input id="title" name="title" value={formData.title} onChange={handleChange} required />
      </div>
      <div>
        <Label htmlFor="subject">Subject</Label>
        <Input id="subject" name="subject" value={formData.subject} onChange={handleChange} required />
      </div>
      <div>
        <Label htmlFor="goals">Learning Goals</Label>
        <Textarea id="goals" name="goals" value={formData.goals} onChange={handleChange} required />
      </div>
      <div>
        <Label htmlFor="desiredOutputs">Desired Outputs</Label>
        <Textarea
          id="desiredOutputs"
          name="desiredOutputs"
          value={formData.desiredOutputs}
          onChange={handleChange}
          required
        />
      </div>
      <Button type="submit">Create Lesson</Button>
    </form>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ProfileForm } from "./components/ProfileForm"
import { LessonForm } from "./components/LessonForm"
import { GameGenerator } from "./components/GameGenerator"

export default function Home() {
  const [profile, setProfile] = useState(null)
  const [lesson, setLesson] = useState(null)

return (
    <div className="container mx-auto p-4 space-y-8">
      <h1 className="text-3xl font-bold">Personalized Learning Platform PoC</h1>

{!profile && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">Create Your Profile</h2>
          <ProfileForm onSubmit={setProfile} />
        </div>
      )}

{profile && !lesson && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">Create a Lesson</h2>
          <LessonForm onSubmit={setLesson} />
        </div>
      )}

{profile && lesson && (
        <div>
          <h2 className="text-2xl font-semibold mb-4">Generate Personalized Game</h2>
          <GameGenerator profile={profile} lesson={lesson} />
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/actions/generate-game.ts"
"use server"

import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

export async function generateGameAction(profile: any, lesson: any) {
  try {
    const prompt = `
      Create a JavaScript game for a student with the following profile:
      Name: ${profile.name}
      Interests: ${profile.interests}
      Learning Style: ${profile.learningStyle}

The game should teach the following lesson:
      Title: ${lesson.title}
      Subject: ${lesson.subject}
      Goals: ${lesson.goals}
      Desired Outputs: ${lesson.desiredOutputs}

Please provide the complete JavaScript code for an interactive game that runs in a web browser.
      The code should be self-contained and not require any external libraries.
      Use HTML5 canvas for graphics if needed.
      The output you return will be directly written inside a <script> tag, so be sure its valid JavaScript.
    `

const { text } = await generateText({
      model: openai("gpt-4o-mini"),
      prompt: prompt,
    })

return { success: true, game: text }
  } catch (error) {
    console.error("Error generating game:", error)
    return { success: false, error: "Failed to generate game. Please try again." }
  }
}

[V0_FILE]typescriptreact:file="app/components/GameGenerator.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { generateGameAction } from "../actions/generate-game"
import { useToast } from "@/components/ui/use-toast"

export function GameGenerator({ profile, lesson }: { profile: any; lesson: any }) {
  const [generatedGame, setGeneratedGame] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

const generateGame = async () => {
    setIsLoading(true)
    try {
      const result = await generateGameAction(profile, lesson)

if (result.success && result.game) {
        setGeneratedGame(result.game)
      } else {
        toast({
          title: "Error",
          description: result.error || "Failed to generate game. Please try again.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Error",
        description: "An unexpected error occurred. Please try again.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

return (
    <div className="space-y-4">
      <Button onClick={generateGame} disabled={isLoading}>
        {isLoading ? "Generating..." : "Generate Personalized Game"}
      </Button>
      {generatedGame && (
        <div className="border rounded-lg p-4">
          <iframe
            srcDoc={`
              <html>
                <body>
                  <script>
                    ${generatedGame}
                  </script>
                </body>
              </html>
            `}
            className="w-full h-[400px] border-0"
            sandbox="allow-scripts"
          />
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import "./globals.css"
import { Toaster } from "@/components/ui/toaster"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}
89:["$","$L93",null,{"chatId":"ySGkTuALUnh","children":["$","$L94",null,{"data":{"@\"active-block\",\"ySGkTuALUnh\",":{"id":"b_V0lgphnHGVS","messageId":"LYNru522esCzfGDhEEvi8THKRSwKp6Xo","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"PersonalizedLearningPlatform","type":"code-project","project":"PersonalizedLearningPlatform"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"ySGkTuALUnh\",":false,"":null},"children":"$L96"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from mleiter

More Templates Like This