-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontent.js
More file actions
347 lines (279 loc) Β· 16.1 KB
/
content.js
File metadata and controls
347 lines (279 loc) Β· 16.1 KB
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
// Listener for messages from background script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.instruction) {
const textarea = document.querySelector('textarea');
if (textarea) {
textarea.value = message.instruction;
textarea.dispatchEvent(new Event('input', { bubbles: true }));
// Simulate Enter key press
const enterEvent = new KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
keyCode: 13 // Key code for Enter
});
textarea.dispatchEvent(enterEvent);
}
}
});
// Create a side panel div
const sidePanel = document.createElement('div');
sidePanel.id = 'mySidePanel';
sidePanel.style.position = 'fixed';
sidePanel.style.right = '6px'; // Added 6px spacing from the right
sidePanel.style.top = '0';
sidePanel.style.width = '195px'; // Reduced the width by 5px
sidePanel.style.height = '100%';
sidePanel.style.backgroundColor = '#343541';
// Add the heading with the text "Chat EDU"
const headingText = "Chat EDU";
const heading = document.createElement('div');
heading.style.margin = '30px auto';
heading.style.textAlign = 'center';
heading.style.fontSize = '30px';
heading.style.fontWeight = 'bold';
heading.style.letterSpacing = '2px';
// Split heading text into individual letters and apply effects
Array.from(headingText).forEach(letter => {
const span = document.createElement('span');
span.innerText = letter;
span.style.display = 'inline-block';
span.style.transition = 'all 0.4s ease';
// Add hover effects
span.addEventListener('mouseover', function() {
// Skew transformation
const skewX = (Math.random() - 0.5) * 20;
const skewY = (Math.random() - 0.5) * 20;
// Random soft color palette
const colors = ['#FFB6C1', '#FFD700', '#FF6347', '#98FB98', '#ADD8E6', '#FF69B4'];
const color = colors[Math.floor(Math.random() * colors.length)];
// Apply styles
this.style.color = color;
this.style.transform = `skew(${skewX}deg, ${skewY}deg) translateY(-10px)`;
});
span.addEventListener('mouseout', function() {
this.style.color = '';
this.style.transform = '';
});
heading.appendChild(span);
});
sidePanel.appendChild(heading);
// Function to apply effects on the heading
function applyHeadingEffects() {
Array.from(heading.children).forEach(span => {
// Skew transformation
const skewX = (Math.random() - 0.5) * 20;
const skewY = (Math.random() - 0.5) * 20;
// Random soft color palette
const colors = ['#FFB6C1', '#FFD700', '#FF6347', '#98FB98', '#ADD8E6', '#FF69B4'];
const color = colors[Math.floor(Math.random() * colors.length)];
// Apply styles
span.style.color = color;
span.style.transform = `skew(${skewX}deg, ${skewY}deg) translateY(-10px)`;
// Reset styles after a delay
setTimeout(() => {
span.style.transitionDuration = `${Math.random() * 1 + 0.75}s`; // Random duration
span.style.color = '';
span.style.transform = '';
}, 3000); // 3 seconds delay
});
}
//This project, hosted under bg-neural on GitHub is our original work
//DROP-DOWN
// Function to add QuickGuide to panel
function addQuickGuideToPanel(panel) {
const quickGuideContainer = document.createElement('div');
quickGuideContainer.style.fontSize = '12px';
quickGuideContainer.style.border = '1px solid #dcdcdc';
quickGuideContainer.style.padding = '15px';
quickGuideContainer.style.margin = '8px 0';
quickGuideContainer.style.backgroundColor = '#555';
quickGuideContainer.style.borderRadius = '8px';
quickGuideContainer.innerHTML = 'Copy the text in the links below and place them in your custom instruction panel (bottom left).<br><br>';
const createHyperlink = (href, text) => {
const link = document.createElement('a');
link.href = href;
link.target = '_blank';
link.innerText = text;
link.style.border = '1px solid #dcdcdc';
link.style.padding = '5px';
link.style.borderRadius = '5px';
link.style.transition = 'all 0.4s ease';
link.addEventListener('mouseover', function() {
this.style.backgroundColor = '#555';
this.style.color = 'white';
});
link.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
this.style.color = '';
});
return link;
};
const userLink = createHyperlink('https://hastebin.com/share/icupocohaf.markdown', 'Custom Instruction - User');
const modelLink = createHyperlink('https://hastebin.com/share/amoxexoliv.vbnet', 'Custom Instruction - Model');
quickGuideContainer.appendChild(userLink);
quickGuideContainer.appendChild(document.createElement('br'));
quickGuideContainer.appendChild(document.createElement('br'));
quickGuideContainer.appendChild(modelLink);
panel.appendChild(quickGuideContainer);
}
const dropdown = document.createElement('div');
dropdown.style.width = '100%';
const dropdownBtn = document.createElement('button');
dropdownBtn.innerHTML = 'Starting Guide <span id="arrow">▼</span>';
dropdownBtn.style.width = '100%';
dropdownBtn.style.padding = '14px 20px';
dropdownBtn.style.margin = '8px 0';
dropdownBtn.style.border = 'none';
dropdownBtn.style.cursor = 'pointer';
dropdownBtn.addEventListener('mouseover', function() {
this.style.backgroundColor = '#d15a5a';
this.style.color = 'white';
});
dropdownBtn.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
this.style.color = '';
});
dropdownBtn.style.transition = 'all 0.4s ease';
const dropdownContent = document.createElement('div');
dropdownContent.style.display = 'none';
dropdownContent.style.overflow = 'hidden';
dropdownContent.style.maxHeight = '0';
dropdownContent.style.transition = 'max-height 0.4s ease-in-out';
dropdownBtn.addEventListener('click', function() {
const arrowSpan = document.getElementById('arrow');
if (dropdownContent.style.display === 'none') {
dropdownContent.style.display = 'block';
dropdownContent.style.maxHeight = '500px'; // Set to the approximate max height
arrowSpan.innerHTML = '▲';
} else {
dropdownContent.style.display = 'none';
dropdownContent.style.maxHeight = '0';
arrowSpan.innerHTML = '▼';
}
});
addQuickGuideToPanel(dropdownContent);
dropdown.appendChild(dropdownBtn);
dropdown.appendChild(dropdownContent);
// Assuming sidePanel is already defined
sidePanel.appendChild(dropdown);
//DROP-DOWN
// Create buttons with specified text
const buttonsText = [
'Generate Questions', // More action-oriented
'Formulate Answers', // Emphasizes the act of formulation
'Explore Additional Topics', // Gives a sense of diving deeper without repetition
'Fun Brain Challenges', // "Fun" emphasizes the lighter nature, "Challenges" covers teasers, riddles, etc.
];
// Add the corresponding predefined texts
const predefinedTexts = [
`# **Context Understanding and Question Generation (Stage 2)**
π **Instructions:** Follow the steps in sequence. You are tasked to build upon the "Curriculum Mapping" stage. **It's imperative to complete the table first** before moving on to question formation. **Under no circumstances should you provide answers to these questions. Your role is solely to generate questions.**
## Table Formation
Create a Markdown-formatted table as follows:
| **Column 1** | **Column 2** |
|:----------------------------------------|:-------------|
| **Experts** | Identify 3-4 expert roles specializing in question formulation in academia, exam-setting, and question design |
| **Context Understanding** | A CSV of a condensed list of only the most important modules from the curriculum map created in Stage 1. Emphasize only on the academic topics related to the learning objective. Avoid using lists; instead separate each term with semicolons (;).|
| **Potential Types of Questions** | A CSV of question parameters best suited for evaluating the chosen modules using Bloom's taxonomy as comma seperated values. Specify the parameters of the questions (types and number of questions) best suited for evaluating the user. e.g., 3 MCQs, 2 true-or-false questions, 3 Calculation-based questions, etc.|
## π **Question Formation**
After completing the table, generate EXTENSIVELY DETAILED questions based on the 'Identify Potential Spots for Questions' section. Align the questions with the condensed modules and learning objectives from Stage 1.
`,
`# **Validation & Answer Key Creation (Stage 3)**
π **Instructions:** This stage is a continuation from the previous stage. Follow the steps in sequence, ensuring to build upon your work from the previous stages. **Complete the table first**, then proceed to Validation/Quality Assurance and finally, Answer Key Creation. **Under no circumstances should you provide answers to these questions.**
## Table Formation
Create a Markdown-formatted table as follows:
| **Column 1** | **Column 2** |
|:-------------------------------------|:-------------|
| **Experts** | Identify 3-4 expert roles specializing in assessment validation, answer key creation, and educational quality assurance |
| **Framework** | Outline the types of answers that will be used for creating a robust answer key. For example, for MCQs and True-or-False questions: correct answer + rationale; For Calculation-based questions: step-by-step solution + result; For Open-ended questions: key points. |
| **Validation/Quality Assurance Metrics** | Propose how you plan to ensure that the answer key is accurate and well-reasoned |
## π **Validation/Quality Assurance**
1. **Reiterate Learning Objective:** Re-state the Learning Objective from Stage 1 briefly.
## ποΈ **Answer Key Creation**
Generate an answer key for each of the questions proposed in the last stage (whatever that might be). The answer key should be EXTENSIVELY DETAILED, lengthy, and make use of proper notation, aligning closely with the learning objectives from Stage 1 and the frameworks clarified in this stage. Use VERBOSITY V=3.
For Multiple-Choice Questions and Short Answer Questions, provide the correct answer along with a brief explanation.For Essay and Open-Ended Questions, only outline the key points that a well-reasoned answer should include. No need for a full answer unless the user asks it.
Follow the above instructions explicitly.
`,
`
# **Advanced Question Exploration (Stage 4)**
π **Instructions:**
- **Continuation:** This stage builds upon both "Context Understanding and Question Generation" (Stage 2) and "Validation & Answer Key Creation" (Stage 3). The objective is to explore further dimensions of the learning goal through new, diverse, and unasked questions.
- **Table First:** As always, complete the table below as your initial step.
## π Table Formation
Create a Markdown-formatted table as follows:
| **Column 1** | **Column 2** |
|:------------------------------------------|:------------------------------------------------------------------|
| **Experts** | Identify 3-4 expert roles focusing on advanced question formulation and learning pathway design that weren't mentioned before. |
| **Context Understanding** | Use a CSV to provide a refined list of additional important modules that could be explored further. Separate each term with semicolons (;). |
| **Types of Questions** | In CSV format, list potential types and number of questions that could offer a deeper understanding of the topic. For example, 2 true-or-false questions, 4 MCQs, etc. |
## π― Reiterate Learning Objective
Concisely restate the learning objective from Stage 1 to ensure alignment with the new questions you are about to generate.
## π **Advanced Question Formation**
After completing the table and restating the learning objective, generate questions that are EXTENSIVELY DETAILED and unasked in previous stages. Ensure these questions align closely with the original learning objective and could potentially open up new avenues for learning.
Follow the above instructions explicitly.
`,
`
# **Brain Teasers (Stage X)**
π **Instructions:**
- **Detour:** This stage serves as an enjoyable yet insightful detour from the main instructional path. The objective here is to create quirky, interesting, and maybe even bizarre questions that are aligned with unexplored topics from the curriculum mapped in Stage 1 (if there is no preceding Stage 1, align with user's current question).
- **Table First:** Complete the table below first.
## π Table Formation
Create a Markdown-formatted table as follows:
| **Column 1** | **Column 2** |
|:--------------------------------------|:------------------------------------------------------------------|
| **Experts** | Identify 3-4 expert roles that specialize in trivia, puzzles, or educational games. |
| **Unexplored Topics** | Use a CSV to jot down a list of topics from the Stage 1 curriculum that haven't been covered yet. Separate each term with semicolons (;). |
| **Types of Brain Teasers** | Specify the kind and number of brain teasers you plan to create. For example, 3 puzzles, 2 Did You Knows, 1 riddle, 1 paradox, etc. |
## π― Reiterate Learning Objective
Briefly restate the unexplored learning objectives from Stage 1 that you aim to touch upon through these brain teasers.
## π§ **Brain Teaser Formation**
After completing the table and revisiting the unexplored learning objectives, proceed to formulate brain teasers. These should be short yet thought-provoking and align closely with the topics identified in Stage 1. Maintain a professional tone and language in your formulations.
`
];
buttonsText.forEach((text, index) => {
const button = document.createElement('button');
button.id = `myButton${index + 1}`;
button.innerText = text;
button.style.width = '85%'; // The buttons will automatically adjust to the new side panel width
button.style.padding = '14px 14px';
button.style.margin = '8px 0px 8px 15px';
button.style.fontSize = '14px';
button.style.border = '1px solid #dcdcdc'; // Added thin grey outline
button.style.borderRadius = '10px'; // Added rounded corners
button.style.cursor = 'pointer';
// Add hover effects
button.addEventListener('mouseover', function() {
this.style.backgroundColor = '#555';
this.style.color = 'white';
this.style.boxShadow = '0 4px 8px 0 rgba(0,0,0,0.2)';
this.style.transform = 'scale(1.05)';
});
button.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
this.style.color = '';
this.style.boxShadow = '';
this.style.transform = '';
});
// Add hover effects with smoother transitions
button.style.transition = 'all 0.4s ease';
// Apply the heading effects inside the button click event
button.addEventListener('click', function() {
applyHeadingEffects();
const textarea = document.querySelector('textarea');
if (textarea) {
textarea.value = predefinedTexts[index];
textarea.dispatchEvent(new Event('input', { bubbles: true }));
// Simulate Enter key press
const enterEvent = new KeyboardEvent('keydown', {
bubbles: true,
cancelable: true,
keyCode: 13 // Enter key code
});
textarea.dispatchEvent(enterEvent);
}
});
// Append button to side panel
sidePanel.appendChild(button);
});
// Append side panel to body
document.body.appendChild(sidePanel);