Training update, most of the styles in the old tips were standardized, before all the styles were hardcoded into the tip, the new tips may still have some hardcoded styles but the vast majority only uses standard html or custom ones that are picked up in FormatTip to attribute styles
This commit is contained in:
Carlos Mesquita
@@ -1,91 +1,43 @@
|
||||
import React, { useState, useCallback } from "react";
|
||||
import React from "react";
|
||||
import ExerciseWalkthrough from "@/training/ExerciseWalkthrough";
|
||||
import { ITrainingTip, WalkthroughConfigs } from "./TrainingInterfaces";
|
||||
import formatTip from "./FormatTip";
|
||||
|
||||
|
||||
// This wrapper is just to test new exercises from the handbook, will be removed when all the tips and exercises are in firestore
|
||||
const TrainingExercise: React.FC<ITrainingTip> = (trainingTip: ITrainingTip) => {
|
||||
const leftText = "<div class=\"container mx-auto px-4 overflow-x-auto\"><table class=\"min-w-full bg-white border border-gray-300\"><thead><tr class=\"bg-gray-100\"><th class=\"py-2 px-4 border-b font-semibold text-left\">Category</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option A</th><th class=\"py-2 px-4 border-b font-semibold text-left\">Option B</th></tr></thead><tbody><tr><td class=\"py-2 px-4 border-b font-medium\">Self</td><td class=\"py-2 px-4 border-b\">You need to take care of yourself and connect with the people around you.</td><td class=\"py-2 px-4 border-b\">Focus on your interests and talents and meet people who are like you.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Home</td><td class=\"py-2 px-4 border-b\">It's a good idea to paint your living room yellow.</td><td class=\"py-2 px-4 border-b\">You should arrange your home so that it makes you feel happy.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Financial Life</td><td class=\"py-2 px-4 border-b\">You can be happy if you have enough money, but don't want money too much.</td><td class=\"py-2 px-4 border-b\">If you waste money on things you don't need, you won't have enough money for things that you do need.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Social Life</td><td class=\"py-2 px-4 border-b\">A good group of friends can increase your happiness.</td><td class=\"py-2 px-4 border-b\">Researchers say that a happy friend can increase our mood by nine percent.</td></tr><tr><td class=\"py-2 px-4 border-b font-medium\">Workplace</td><td class=\"py-2 px-4 border-b\">You spend a lot of time at work, so you should like your workplace.</td><td class=\"py-2 px-4 border-b\">Your boss needs to be someone you enjoy working for.</td></tr><tr class=\"bg-gray-50\"><td class=\"py-2 px-4 border-b font-medium\">Community</td><td class=\"py-2 px-4 border-b\">The place where you live is more important for happiness than anything else.</td><td class=\"py-2 px-4 border-b\">Live around people who have the same amount of money as you do.</td></tr></tbody></table></div>";
|
||||
const tip = {
|
||||
category: "Strategy",
|
||||
body: "<p>Look for <b>clues to the main idea</b> in the first (and sometimes second) sentence of a paragraph.</p>"
|
||||
}
|
||||
const question = "<div class=\"container mx-auto px-4 py-8\"><h2 class=\"text-2xl font-bold mb-4\">Identifying Main Ideas</h2><p class=\"text-lg leading-relaxed mb-6\">Read the statements below. Circle the main idea in each pair of statements (a or b).</p></div>";
|
||||
const rightTextData: WalkthroughConfigs[] = [
|
||||
{
|
||||
"html": "<div class='bg-blue-100 p-4 rounded-lg mb-4'><h2 class='text-xl font-bold mb-2'>Identifying Main Ideas</h2><p class='text-gray-700 leading-relaxed'>Let's analyze each pair of statements to determine which one represents the main idea. We'll focus on which statement is more general and encompasses the overall concept.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 5000,
|
||||
"highlight": []
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-green-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>1. Self</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You need to take care of yourself and connect with the people around you.</b></p><p class='mt-2'>This statement is more comprehensive, covering both self-care and social connections. Option B is more specific and could be considered a subset of A.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["You need to take care of yourself and connect with the people around you."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-yellow-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>2. Home</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>B. You should arrange your home so that it makes you feel happy.</b></p><p class='mt-2'>This statement is more general and applies to the entire home. Option A is a specific example that could fall under this broader concept.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["You should arrange your home so that it makes you feel happy."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-pink-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>3. Financial Life</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You can be happy if you have enough money, but don't want money too much.</b></p><p class='mt-2'>This statement provides a balanced view of money's role in happiness. Option B is more specific and could be seen as a consequence of wanting money too much.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["You can be happy if you have enough money, but don't want money too much."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-purple-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>4. Social Life</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. A good group of friends can increase your happiness.</b></p><p class='mt-2'>This statement is more general about the impact of friendships. Option B provides a specific statistic that supports this main idea.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["A good group of friends can increase your happiness."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-indigo-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>5. Workplace</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. You spend a lot of time at work, so you should like your workplace.</b></p><p class='mt-2'>This statement covers the overall importance of workplace satisfaction. Option B focuses on one specific aspect (the boss) and is less comprehensive.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["You spend a lot of time at work, so you should like your workplace."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-red-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>6. Community</h3><p class='text-gray-700 leading-relaxed'>Main idea: <b>A. The place where you live is more important for happiness than anything else.</b></p><p class='mt-2'>While this statement might be debatable, it's more general and encompasses the overall importance of community. Option B is a specific suggestion about community demographics.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": ["The place where you live is more important for happiness than anything else."]
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-orange-50 p-4 rounded-lg mb-4'><h3 class='text-lg font-semibold mb-2'>Key Strategy</h3><p class='text-gray-700 leading-relaxed'>When identifying main ideas:</p><ul class='list-disc pl-5 space-y-2'><li>Look for broader, more encompassing statements</li><li>Consider which statement other ideas could fall under</li><li>Identify which statement provides a general principle rather than a specific example</li></ul></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 8000,
|
||||
"highlight": []
|
||||
},
|
||||
{
|
||||
"html": "<div class='bg-teal-50 p-4 rounded-lg'><h3 class='text-lg font-semibold mb-2'>Helpful Tip</h3><p class='text-gray-700 leading-relaxed'>Remember to look for clues to the main idea in the first (and sometimes second) sentence of a paragraph. In this exercise, we applied this concept to pairs of statements. This approach can help you quickly identify the central theme or main point in various types of text.</p></div>",
|
||||
"wordDelay": 200,
|
||||
"holdDelay": 5000,
|
||||
"highlight": []
|
||||
const tip = {
|
||||
"category": "",
|
||||
"embedding": "",
|
||||
"text": "",
|
||||
"html": "",
|
||||
"id": "",
|
||||
"verified": true,
|
||||
"standalone": false,
|
||||
"exercise": {
|
||||
"question": "",
|
||||
"additional": "",
|
||||
"segments": []
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const mockTip: ITrainingTip = {
|
||||
id: "some random id",
|
||||
tipCategory: tip.category,
|
||||
tipHtml: tip.body,
|
||||
standalone: false,
|
||||
exercise: {
|
||||
question: question,
|
||||
highlightable: leftText,
|
||||
segments: rightTextData
|
||||
}
|
||||
}
|
||||
const mockTip: ITrainingTip = {
|
||||
id: "some random id",
|
||||
tipCategory: tip.category,
|
||||
tipHtml: tip.html,
|
||||
standalone: tip.standalone,
|
||||
exercise: {
|
||||
question: tip.exercise.question,
|
||||
additional: tip.exercise.additional,
|
||||
segments: tip.exercise.segments as WalkthroughConfigs[]
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-10">
|
||||
<ExerciseWalkthrough {...trainingTip}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
const formattedTip = formatTip(mockTip);
|
||||
return (
|
||||
<ExerciseWalkthrough {...formatTip(trainingTip)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default TrainingExercise;
|
||||
Reference in New Issue
Block a user