Upload constructive-alignment-generator-basic.tsx

constructive-alignment-generator-basic.tsx

@@ -0,0 +1,207 @@
+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;