Spaces:
Running
Running
Create script.js
Browse files
script.js
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const GPT_URL = 'https://your-custom-gpt-url';
|
| 2 |
+
|
| 3 |
+
const $ = s => document.querySelector(s);
|
| 4 |
+
const $$ = s => Array.from(document.querySelectorAll(s));
|
| 5 |
+
|
| 6 |
+
const out = $('#out');
|
| 7 |
+
const hint = $('#hint');
|
| 8 |
+
const cta = $('#copyOpen');
|
| 9 |
+
|
| 10 |
+
function getSingle(name){
|
| 11 |
+
const on = $(`.toggles[data-name="${name}"] .toggle[aria-pressed="true"]`);
|
| 12 |
+
return on ? on.textContent.trim() : '';
|
| 13 |
+
}
|
| 14 |
+
function getMultiKeys(){
|
| 15 |
+
const obj = {};
|
| 16 |
+
$$('.toggles.multi .toggle').forEach(b=>{
|
| 17 |
+
const k = b.dataset.key;
|
| 18 |
+
obj[k] = b.getAttribute('aria-pressed') === 'true';
|
| 19 |
+
});
|
| 20 |
+
return obj;
|
| 21 |
+
}
|
| 22 |
+
function toggleBehavior(){
|
| 23 |
+
$$('.toggles').forEach(group=>{
|
| 24 |
+
group.addEventListener('click', e=>{
|
| 25 |
+
const btn = e.target.closest('.toggle');
|
| 26 |
+
if(!btn) return;
|
| 27 |
+
const multi = group.classList.contains('multi');
|
| 28 |
+
const pressed = btn.getAttribute('aria-pressed') === 'true';
|
| 29 |
+
if(multi){
|
| 30 |
+
btn.setAttribute('aria-pressed', (!pressed).toString());
|
| 31 |
+
}else{
|
| 32 |
+
group.querySelectorAll('.toggle').forEach(b=>b.setAttribute('aria-pressed','false'));
|
| 33 |
+
btn.setAttribute('aria-pressed', 'true');
|
| 34 |
+
}
|
| 35 |
+
});
|
| 36 |
+
});
|
| 37 |
+
}
|
| 38 |
+
toggleBehavior();
|
| 39 |
+
|
| 40 |
+
function buildPrompt(){
|
| 41 |
+
const topic = $('#topic').value.trim();
|
| 42 |
+
const audience = getSingle('audience') || 'Students';
|
| 43 |
+
const level = getSingle('level') || 'Beginner';
|
| 44 |
+
const delivery = getSingle('delivery') || 'Online';
|
| 45 |
+
const language = getSingle('language') || 'Auto';
|
| 46 |
+
const tone = getSingle('tone') || 'Professional';
|
| 47 |
+
const depth = getSingle('depth') || 'Standard';
|
| 48 |
+
const duration = $('#duration').value.trim() || '6 weeks';
|
| 49 |
+
const localization = $('#localization').value.trim() || 'Auto';
|
| 50 |
+
const exportFmt = $('#export').value.trim() || 'PDF';
|
| 51 |
+
const notes = $('#notes').value.trim();
|
| 52 |
+
const add = getMultiKeys();
|
| 53 |
+
|
| 54 |
+
if(!topic){
|
| 55 |
+
hint.textContent = 'Please enter a Topic.';
|
| 56 |
+
return '';
|
| 57 |
+
}
|
| 58 |
+
hint.textContent = '';
|
| 59 |
+
|
| 60 |
+
const wantVideo = add.video ? 'Yes' : 'No';
|
| 61 |
+
const wantBloom = add.bloom ? 'Yes' : 'No';
|
| 62 |
+
const wantAssess = add.assess ? 'Yes' : 'No';
|
| 63 |
+
|
| 64 |
+
const langLine = language === 'Auto'
|
| 65 |
+
? 'Respond in the same language as the user\'s query.'
|
| 66 |
+
: `Respond in ${language}.`;
|
| 67 |
+
|
| 68 |
+
const text =
|
| 69 |
+
`🧠 Identity & Behavior:
|
| 70 |
+
You are CourseMaster GPT, an expert-level AI trained to design comprehensive, research-backed, ethically grounded, and practically beneficial course outlines instantly based on user input.
|
| 71 |
+
|
| 72 |
+
You specialize in generating structured, engaging, and accessible course plans tailored to different audiences (students, freelancers, professionals), skill levels (beginner to advanced), and delivery formats (live/recorded, online/offline).
|
| 73 |
+
– Optionally map each objective with Bloom’s Taxonomy level.
|
| 74 |
+
|
| 75 |
+
🌐 Language & Tone:
|
| 76 |
+
📌 ${langLine}
|
| 77 |
+
📌 Maintain a consistently ${tone.toLowerCase()} and motivational tone.
|
| 78 |
+
|
| 79 |
+
📦 Core Output Structure:
|
| 80 |
+
Every course must include:
|
| 81 |
+
|
| 82 |
+
📘 Course Title – Clear and topic-relevant
|
| 83 |
+
🎯 Course Objectives – Key learning goals in bullet format
|
| 84 |
+
📚 Lessons Outline – Numbered weekly or modular format, each with:
|
| 85 |
+
Complete lesson summary
|
| 86 |
+
Integrated ethical/moral training
|
| 87 |
+
2–4 recall questions (no answers)
|
| 88 |
+
1–2 open-ended prompts
|
| 89 |
+
1 real-life application scenario
|
| 90 |
+
📝 Practical Activities – Assignments or tasks per lesson
|
| 91 |
+
💡 Expected Outcomes – What learners will achieve
|
| 92 |
+
🧭 Ethical Integration – Values like honesty, responsibility, and respect
|
| 93 |
+
🎥 Video Lesson Support (if requested)
|
| 94 |
+
|
| 95 |
+
🎥 Video Lesson Support (requested): ${wantVideo}
|
| 96 |
+
If "Yes", for each lesson, include:
|
| 97 |
+
Video Title, Suggested Duration (5–10 min), Script Outline, Visual Slide Topics, Suggested Tools (OBS, VN, mic), Call-to-Action + link to next step.
|
| 98 |
+
|
| 99 |
+
🪄 If online and not mentioned:
|
| 100 |
+
"اگر آپ چاہیں تو اس کورس کے لیے ریکارڈڈ ویڈیو لیسنز بھی شامل کیے جا سکتے ہیں تاکہ سٹوڈنٹس بعد میں آسانی سے دوبارہ دیکھ سکیں۔ میں ویڈیو اسکرپٹس، سلائیڈ ٹاپکس اور ویڈیو پلاننگ میں مدد کر سکتا ہوں۔"
|
| 101 |
+
– Add a simple progression matrix showing skill build-up.
|
| 102 |
+
|
| 103 |
+
🔬 Research & Pedagogical Design:
|
| 104 |
+
Align with global learning science standards
|
| 105 |
+
Match complexity to user's cognitive level (${level})
|
| 106 |
+
Use clear, simple explanations; include analogies, short stories, modular steps when beneficial.
|
| 107 |
+
|
| 108 |
+
📊 Deliverables Format Summary:
|
| 109 |
+
Section Included
|
| 110 |
+
Title ✅
|
| 111 |
+
Objectives ✅
|
| 112 |
+
Lessons + Ethics + Recall + Prompts ✅
|
| 113 |
+
Assignments ✅
|
| 114 |
+
Outcomes ✅
|
| 115 |
+
Optional Video Content ${wantVideo === 'Yes' ? '✅' : '➖'}
|
| 116 |
+
Language Flexibility ✅
|
| 117 |
+
Real-Life Applications ✅
|
| 118 |
+
|
| 119 |
+
🧩 Adaptive & Advanced Features:
|
| 120 |
+
🔄 Adaptive Course Customization Logic:
|
| 121 |
+
Ask clarifying questions if the prompt is vague.
|
| 122 |
+
📊 Learner Assessment Module: ${wantAssess}
|
| 123 |
+
🧠 Bloom’s Taxonomy Mapping: ${wantBloom}
|
| 124 |
+
|
| 125 |
+
🌐 Cultural Localization:
|
| 126 |
+
Adapt tone and examples to: ${localization}
|
| 127 |
+
|
| 128 |
+
📂 Output Format Options:
|
| 129 |
+
Preferred Export: ${exportFmt}
|
| 130 |
+
|
| 131 |
+
���� Topic:
|
| 132 |
+
${topic}
|
| 133 |
+
|
| 134 |
+
👥 Audience: ${audience}
|
| 135 |
+
📈 Level: ${level}
|
| 136 |
+
🕒 Duration: ${duration}
|
| 137 |
+
🎓 Delivery: ${delivery}
|
| 138 |
+
📌 Depth: ${depth}
|
| 139 |
+
|
| 140 |
+
🗒️ Notes:
|
| 141 |
+
${notes || 'N/A'}
|
| 142 |
+
|
| 143 |
+
✅ Example Interaction:
|
| 144 |
+
If the user asks for a ${duration} ${delivery.toLowerCase()} course on "${topic}" for ${audience.toLowerCase()}, respond with the full structure above.
|
| 145 |
+
|
| 146 |
+
🤝 Confirmation & Feedback:
|
| 147 |
+
Always end with:
|
| 148 |
+
"Does this course outline align with your expectations, or would you like any adjustments?"
|
| 149 |
+
"Thank you for using CourseMaster AI GPT. If satisfied, please consider leaving a positive rating or feedback. Your response is highly appreciated."
|
| 150 |
+
|
| 151 |
+
⚠️ Behavior Control:
|
| 152 |
+
Use all elements naturally and selectively — avoid forced or unnecessary details.
|
| 153 |
+
Stay user-centered, respectful, and context-aware at all times.`;
|
| 154 |
+
|
| 155 |
+
return text + `\n\n— CourseMaster`;
|
| 156 |
+
}
|
| 157 |
+
|
| 158 |
+
function typewriter(el, text){
|
| 159 |
+
el.textContent = '';
|
| 160 |
+
let i = 0;
|
| 161 |
+
const step = () => {
|
| 162 |
+
if(i < text.length){
|
| 163 |
+
el.textContent += text[i++];
|
| 164 |
+
requestAnimationFrame(step);
|
| 165 |
+
}
|
| 166 |
+
};
|
| 167 |
+
requestAnimationFrame(step);
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
$('#start').addEventListener('click', () => {
|
| 171 |
+
const prompt = buildPrompt();
|
| 172 |
+
if(!prompt) return;
|
| 173 |
+
typewriter(out, prompt);
|
| 174 |
+
cta.classList.remove('hidden');
|
| 175 |
+
});
|
| 176 |
+
|
| 177 |
+
document.addEventListener('keydown', e => {
|
| 178 |
+
if(e.key === 'Enter' && document.activeElement.id !== 'notes'){
|
| 179 |
+
e.preventDefault();
|
| 180 |
+
$('#start').click();
|
| 181 |
+
}
|
| 182 |
+
});
|
| 183 |
+
|
| 184 |
+
async function copyToClipboard(text){
|
| 185 |
+
try{
|
| 186 |
+
await navigator.clipboard.writeText(text);
|
| 187 |
+
return true;
|
| 188 |
+
}catch{
|
| 189 |
+
return false;
|
| 190 |
+
}
|
| 191 |
+
}
|
| 192 |
+
|
| 193 |
+
cta.addEventListener('click', async () => {
|
| 194 |
+
const txt = out.textContent.trim();
|
| 195 |
+
if(!txt){ hint.textContent = 'Nothing to copy.'; return; }
|
| 196 |
+
hint.textContent = '';
|
| 197 |
+
cta.disabled = true;
|
| 198 |
+
const copied = await copyToClipboard(txt);
|
| 199 |
+
const w = window.open(GPT_URL, '_blank');
|
| 200 |
+
const opened = !!w;
|
| 201 |
+
cta.textContent = `${copied ? 'Copied' : 'Copy failed'} • ${opened ? 'Opening GPT…' : 'Open your GPT manually'}`;
|
| 202 |
+
setTimeout(()=>{ cta.textContent = 'Copy & Paste Now'; cta.disabled = false; }, 1400);
|
| 203 |
+
});
|