import React, { useState } from ‘react’; import { CheckCircle2, XCircle, Info, RotateCcw, Award } from ‘lucide-react’; const App = () => { const [answers, setAnswers] = useState({}); const [showResults, setShowResults] = useState(false); const readingText = { title: “Chameleons”, content: [ “Madagascar has got the biggest population of chameleons, but there are a lot of them in other African countries, in Asia and Europe too. These amazing lizards live both in the rainforests and in the grass too. You can find them in hot and cold places because they are good at getting food and water.”, “Changing colour is just one of the amazing things chameleons can do. Because they don’t move very fast, they use their long tongue to catch insects, small birds or lizards. Many chameleons spend their lives on trees, so they’ve got special toes and curly tails that keep them safe when they’re climbing. Their eyes are also amazing – they can move them so they can watch two different objects at the same time.”, “Chameleons can be good pets because they’re small and quiet, but it’s difficult to keep them healthy. The veiled chameleon is the easiest to keep so it’s the most popular pet of all chameleons. It’s also one of the biggest. It has a big thing on its head that looks like a party hat. This chameleon uses it to get water.” ] }; const questions = [ { id: 1, q: “1. Chameleons live”, options: [ { id: ‘a’, text: “in different places” }, { id: ‘b’, text: “only in hot places” }, { id: ‘c’, text: “only on trees” } ], correct: ‘a’ }, { id: 2, q: “2. To catch food, they”, options: [ { id: ‘a’, text: “change colour” }, { id: ‘b’, text: “use their tongue” }, { id: ‘c’, text: “move fast” } ], correct: ‘b’ }, { id: 3, q: “3. Their eyes”, options: [ { id: ‘a’, text: “help them climb” }, { id: ‘b’, text: “keep them safe” }, { id: ‘c’, text: “can move” } ], correct: ‘c’ }, { id: 4, q: “4. Pet chameleons are”, options: [ { id: ‘a’, text: “easy to look after” }, { id: ‘b’, text: “not very easy to look after” }, { id: ‘c’, text: “quieter than wild chameleons” } ], correct: ‘b’ }, { id: 5, q: “5. The veiled chameleon”, options: [ { id: ‘a’, text: “isn’t a popular pet” }, { id: ‘b’, text: “is the biggest chameleon” }, { id: ‘c’, text: “looks different from others” } ], correct: ‘c’ } ]; const handleSelect = (qId, optId) => { if (showResults) return; setAnswers(prev => ({ …prev, [qId]: optId })); }; const calculateScore = () => { let score = 0; questions.forEach(q => { if (answers[q.id] === q.correct) score++; }); return score; }; const reset = () => { setAnswers({}); setShowResults(false); }; return ( ); }; export default App; import React, { useState } from ‘react’; import { CheckCircle2, XCircle, BookOpen, RotateCcw, Award, HelpCircle } from ‘lucide-react’; const App = () => { const [answers, setAnswers] = useState({}); const [showResults, setShowResults] = useState(false); const diaryEntries = [ { date: “23rd July”, text: “It’s day number one of our holiday. We usually go to Spain in the summer. We love it there but this year we’re in Corsica, in France. It’s a beautiful island!” }, { date: “27th July”, text: “There are white beaches and you can go swimming, windsurfing and sailing. But today I’m swimming in a lake! There are a lot of lakes and rivers here. The longest river is the Golo – it’s 90 kilometres long. I want to swim in the lake again but Mum says the sea is better. She doesn’t like cold water and the water in the lake is cold!” }, { date: “1st August”, text: “It’s a beautiful day. We’re walking in the mountains. You can go mountain biking too. I want to go rock climbing but Dad says it’s too dangerous.” }, { date: “3rd August”, text: “Today we’re in Ajaccio. Ajaccio is next to the sea and it’s the coolest town on the island. I love the shops here. It’s lunch time now and we’re sitting under an umbrella and eating sausages and cheese. Yum!” } ]; const questions = [ { id: 1, q: “1. It’s 27th July. Where is Joy swimming?”, placeholder: “She is swimming in…”, keywords: [“lake”], correctDesc: “She is swimming in a lake.” }, { id: 2, q: “2. What does Joy’s mum say about swimming in the lake?”, placeholder: “She says the…”, keywords: [“sea”, “better”, “cold”], correctDesc: “She says the sea is better / the lake water is cold.” }, { id: 3, q: “3. What activities can you do in the mountains?”, placeholder: “You can go…”, keywords: [“walking”, “mountain biking”, “rock climbing”], correctDesc: “You can go walking, mountain biking and rock climbing.” }, { id: 4, q: “4. Where is Ajaccio?”, placeholder: “It is…”, keywords: [“sea”, “island”, “Corsica”, “next”], correctDesc: “It’s next to the sea / on the island.” }, { id: 5, q: “5. It’s 3rd August. Where are Joy and her family sitting?”, placeholder: “They are sitting under…”, keywords: [“umbrella”], correctDesc: “They are sitting under an umbrella.” }, { id: 6, q: “6. What water sports can you do in Corsica?”, placeholder: “You can go…”, keywords: [“swimming”, “windsurfing”, “sailing”], correctDesc: “You can go swimming, windsurfing and sailing.” }, { id: 7, q: “7. How long is the Golo river?”, placeholder: “It is…”, keywords: [“90”, “kilometres”], correctDesc: “It is 90 kilometres long.” }, { id: 8, q: “8. Why doesn’t Joy’s mum like swimming in the lake?”, placeholder: “Because…”, keywords: [“cold”, “doesn’t like”], correctDesc: “Because she doesn’t like cold water / the water is cold.” }, { id: 9, q: “9. What does Joy’s dad think about rock climbing?”, placeholder: “He thinks it’s…”, keywords: [“dangerous”], correctDesc: “He thinks it’s too dangerous.” }, { id: 10, q: “10. It’s 3rd August. What are Joy and her family eating?”, placeholder: “They are eating…”, keywords: [“sausages”, “cheese”], correctDesc: “They are eating sausages and cheese.” } ]; const handleInput = (id, val) => { if (showResults) return; setAnswers(prev => ({ …prev, [id]: val })); }; const isCorrect = (q) => { const userAns = (answers[q.id] || “”).toLowerCase(); return q.keywords.some(kw => userAns.includes(kw.toLowerCase())); }; const calculateScore = () => { let score = 0; questions.forEach(q => { if (isCorrect(q)) score++; }); return score; }; return (