File size: 8,924 Bytes
a50108f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
import React, { useState } from 'react';
import { Check, RefreshCw } from 'lucide-react';
const ConstructiveAlignmentGenerator = () => {
const [activity, setActivity] = useState({ name: '', types: [], description: '' });
const [alignment, setAlignment] = useState({ achieve: [], construct: [], achieveExplanation: '', constructExplanation: '' });
const [output, setOutput] = useState('');
const activityTypes = ['solve problems', 'discuss in groups', 'create a project', 'give presentations', 'analyze case studies', 'conduct experiments'];
const achieveOptions = ['providing hands-on practice', 'encouraging critical thinking', 'allowing for peer learning', 'applying concepts to real-world situations'];
const constructOptions = ['actively engaging with the material', 'discussing ideas with peers', 'applying concepts in new contexts', 'reflecting on their learning process', 'connecting new information to prior knowledge'];
const handleActivityChange = (e) => setActivity({ ...activity, [e.target.name]: e.target.value });
const handleActivityTypesChange = (type) => {
setActivity(prev => ({
...prev,
types: prev.types.includes(type) ? prev.types.filter(t => t !== type) : [...prev.types, type]
}));
};
const handleAlignmentChange = (option, category) => {
setAlignment(prev => ({
...prev,
[category]: prev[category].includes(option) ? prev[category].filter(item => item !== option) : [...prev[category], option]
}));
};
const handleExplanationChange = (e, category) => {
setAlignment(prev => ({ ...prev, [`${category}Explanation`]: e.target.value }));
};
const generateExplanation = () => {
const explanation = `
<h2>Constructive Alignment Explanation</h2>
<h3>Learning Activity: "${activity.name}"</h3>
<p>In this activity, students will ${activity.types.join(', ')}.</p>
<p>${activity.description}</p>
<h3>Alignment Explanation:</h3>
<h4>a) This activity helps students achieve the ILO by:</h4>
<ul>
${alignment.achieve.map(item => `<li>${item}</li>`).join('')}
</ul>
<p>${alignment.achieveExplanation}</p>
<h4>b) This activity supports students in constructing knowledge by:</h4>
<ul>
${alignment.construct.map(item => `<li>${item}</li>`).join('')}
</ul>
<p>${alignment.constructExplanation}</p>
`;
setOutput(explanation);
};
const resetForm = () => {
setActivity({ name: '', types: [], description: '' });
setAlignment({ achieve: [], construct: [], achieveExplanation: '', constructExplanation: '' });
setOutput('');
};
const Section = ({ title, children }) => (
<div style={{ marginBottom: '30px', background: '#ffffff', padding: '25px', borderRadius: '12px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)' }}>
<h3 style={{ marginTop: 0, color: '#2c3e50', fontSize: '1.5em', marginBottom: '20px' }}>{title}</h3>
{children}
</div>
);
const Button = ({ onClick, children, color = '#3498db', icon }) => (
<button
onClick={onClick}
style={{
padding: '12px 24px',
fontSize: '16px',
backgroundColor: color,
color: 'white',
border: 'none',
borderRadius: '6px',
cursor: 'pointer',
transition: 'all 0.3s ease',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '10px 0'
}}
onMouseOver={(e) => e.target.style.transform = 'translateY(-2px)'}
onMouseOut={(e) => e.target.style.transform = 'translateY(0)'}
>
{icon && <span style={{ marginRight: '10px' }}>{icon}</span>}
{children}
</button>
);
const Checkbox = ({ checked, onChange, label }) => (
<label style={{ display: 'flex', alignItems: 'center', marginBottom: '15px', cursor: 'pointer' }}>
<div
style={{
width: '22px',
height: '22px',
border: '2px solid #3498db',
borderRadius: '4px',
marginRight: '12px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: checked ? '#3498db' : 'white',
transition: 'all 0.2s ease'
}}
onClick={onChange}
>
{checked && <Check size={16} color="white" />}
</div>
<span style={{ fontSize: '16px', color: '#34495e' }}>{label}</span>
</label>
);
return (
<div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '30px', backgroundColor: '#f5f7fa' }}>
<h1 style={{ textAlign: 'center', color: '#2c3e50', marginBottom: '30px' }}>Constructive Alignment Generator</h1>
<div style={{ background: '#ecf0f1', padding: '20px', borderRadius: '8px', marginBottom: '30px' }}>
<h2 style={{ color: '#34495e', marginTop: 0 }}>Introduction</h2>
<p style={{ color: '#7f8c8d', lineHeight: '1.6' }}>
This generator will help you create a constructive alignment explanation for your learning activity.
Fill in the details about your activity and how it aligns with your Intended Learning Outcomes (ILOs).
The generator will then produce a formatted explanation that you can use in your lesson plan.
</p>
</div>
<Section title="1. Learning Activity">
<input
type="text"
placeholder="Activity Name"
name="name"
value={activity.name}
onChange={handleActivityChange}
style={{ width: '100%', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginBottom: '15px', fontSize: '16px' }}
/>
<p style={{ marginBottom: '15px', color: '#34495e' }}>In this activity, students will:</p>
{activityTypes.map(type => (
<Checkbox
key={type}
checked={activity.types.includes(type)}
onChange={() => handleActivityTypesChange(type)}
label={type}
/>
))}
<textarea
placeholder="Brief description of the activity"
name="description"
value={activity.description}
onChange={handleActivityChange}
style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
/>
</Section>
<Section title="2. Alignment Explanation">
<h4 style={{ color: '#34495e', marginBottom: '15px' }}>a) How this activity helps achieve the ILO:</h4>
{achieveOptions.map(option => (
<Checkbox
key={option}
checked={alignment.achieve.includes(option)}
onChange={() => handleAlignmentChange(option, 'achieve')}
label={option}
/>
))}
<textarea
placeholder="Additional explanation (Consider: How does this activity directly relate to the ILO? What specific skills or knowledge from the ILO does this activity target?)"
value={alignment.achieveExplanation}
onChange={(e) => handleExplanationChange(e, 'achieve')}
style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
/>
<h4 style={{ color: '#34495e', marginTop: '25px', marginBottom: '15px' }}>b) How this activity helps students build their own understanding:</h4>
{constructOptions.map(option => (
<Checkbox
key={option}
checked={alignment.construct.includes(option)}
onChange={() => handleAlignmentChange(option, 'construct')}
label={option}
/>
))}
<textarea
placeholder="Additional explanation (Consider: How does this activity promote active learning? How does it encourage students to engage deeply with the material?)"
value={alignment.constructExplanation}
onChange={(e) => handleExplanationChange(e, 'construct')}
style={{ width: '100%', height: '100px', padding: '12px', border: '1px solid #bdc3c7', borderRadius: '6px', marginTop: '15px', fontSize: '16px' }}
/>
</Section>
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px' }}>
<Button onClick={generateExplanation} color="#27ae60">
Generate Explanation
</Button>
<Button onClick={resetForm} color="#e74c3c" icon={<RefreshCw size={18} />}>
Restart
</Button>
</div>
{output && (
<Section title="Generated Explanation">
<div dangerouslySetInnerHTML={{ __html: output }} style={{ background: 'white', padding: '20px', borderRadius: '8px', boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.1)' }} />
</Section>
)}
</div>
);
};
export default ConstructiveAlignmentGenerator;
|