Community Help

LouisRosche · ‎08-10-2024

Hello Dear Reader!

I'm struggling to get my code block to save and display properly when utilizing the embedding function in a Page; it quite literally only saves and runs the first 27 lines of code.

Any suggestions or fixes?

Code:
"""

<!DOCTYPE html>

<head>

<title>Improved Scientific Thinking Cycle Tool</title>

<style>

:root {

--primary-color: #0066cc;

--background-color: #f0f0f0;

--text-color: #333;

--hover-color: #004499;

}

body {

font-family: Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

margin: 0;

padding: 20px;

background-color: var(--background-color);

color: var(--text-color);

box-sizing: border-box;

}

#cycle-container, #instructions {

width: 100%;

max-width: 800px;

background-color: white;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0,0,0,0.1);

margin-bottom: 20px;

border: 2px solid var(--text-color);

}

#cycle-container {

aspect-ratio: 1/1;

position: relative;

}

#instructions {

padding: 20px;

}

.sidebar {

position: fixed;

right: -300px;

top: 0;

width: 300px;

height: 100%;

background-color: white;

box-shadow: -2px 0 5px rgba(0,0,0,0.1);

transition: right 0.3s ease;

overflow-y: auto;

padding: 20px;

box-sizing: border-box;

}

.sidebar.open {

right: 0;

}

.close-btn {

position: absolute;

top: 10px;

right: 10px;

font-size: 24px;

cursor: pointer;

background: none;

border: none;

color: var(--text-color);

}

a {

color: var(--primary-color);

text-decoration: none;

}

a:hover {

text-decoration: underline;

color: var(--hover-color);

}

.tooltip {

position: absolute;

background-color: rgba(0, 0, 0, 0.8);

color: white;

padding: 5px 10px;

border-radius: 5px;

font-size: 14px;

pointer-events: none;

opacity: 0;

transition: opacity 0.3s;

}

@media (max-width: 600px) {

body {

padding: 10px;

}

#instructions, #cycle-container {

border-radius: 5px;

}

.sidebar {

width: 100%;

right: -100%;

}

</style>

</head>

<body>

<h2>Improved Scientific Thinking Cycle Tool</h2>

<p>This interactive tool helps you understand and apply the scientific method. Click or use keyboard navigation to explore each step of the cycle.</p>

<ol>

<li>Start at the "Wonder" step and follow the cycle clockwise.</li>

<li>Click or press Enter on each step to open detailed information.</li>

<li>Use arrow keys to navigate between steps.</li>

<li>Press Esc to close the sidebar.</li>

<li>Hover over steps for quick tooltips.</li>

</ol>

</div>

<h3>Metacognitive Prompt:</h3>

<h3>Collaborative Inquiry:</h3>

<h3>Nature of Science Connection:</h3>

<h3>Stuck?</h3>

</div>

const cycleSteps = [

{name:"Wonder",color:"#FF9999",description:"Observe the world around you and identify interesting phenomena.",metacognitive:"What aspects of the world around me spark my curiosity? Why do these things interest me?",collaborative:"Share your observations with a classmate. How do their interests differ from or align with yours?",nos:"Scientists often draw inspiration from everyday observations. How does this relate to your own curiosity?",stuck:"Look around your classroom or out the window. What do you see that makes you curious? Try asking <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'What are some interesting scientific phenomena I might observe in a typical classroom?'"},

{name:"Question",color:"#FFCC99",description:"Formulate a specific, testable question about your observation.",metacognitive:"How can I turn my wonder into a specific, answerable question? What do I already know about this topic?",collaborative:"Discuss your question with peers. How can you refine it based on their input?",nos:"Scientific questions are specific and testable. How does your question meet these criteria?",stuck:"Use question starters like What, How, Why, When, Where, or Which. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'How can I turn this observation [your observation] into a testable scientific question?'"},

{name:"Hypothesis",color:"#FFFF99",description:"Propose a possible answer to your question based on prior knowledge.",metacognitive:"What do I already know that might help me predict an answer? How confident am I in this prediction?",collaborative:"Share your hypothesis with a group. How do others' hypotheses differ? Why might that be?",nos:"Hypotheses are educated guesses based on existing knowledge. How does your hypothesis reflect this?",stuck:"Try using an 'If...then...' statement to structure your hypothesis. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'Can you help me form a hypothesis for this question: [your question]?'"},

{name:"Experiment",color:"#CCFF99",description:"Design and conduct a fair test to investigate your hypothesis.",metacognitive:"How can I design a fair test? What variables do I need to control?",collaborative:"Work with a partner to review each other's experimental designs. What improvements can you suggest?",nos:"Experiments in science are designed to be repeatable. How does your design ensure this?",stuck:"Consider what materials are available in your classroom. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'What's a simple experiment I can do in a classroom to test this hypothesis: [your hypothesis]?'"},

{name:"Collect Data",color:"#99FF99",description:"Gather and record observations and measurements from your experiment.",metacognitive:"Am I recording my data accurately and precisely? How can I organize my data effectively?",collaborative:"Compare your data collection methods with a classmate. How can you ensure consistency across observers?",nos:"Scientific data should be objective and replicable. How does your data collection reflect these principles?",stuck:"Use your iPad to create a simple spreadsheet for data collection. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'What's the best way to organize data for this experiment: [brief description of your experiment]?'"},

{name:"Analyze",color:"#99FFCC",description:"Examine your data for patterns, trends, or relationships.",metacognitive:"What patterns do I see in my data? How confident am I in these patterns?",collaborative:"Share your initial analysis with a group. What additional insights do others provide?",nos:"Scientists use various tools and methods to analyze data. What methods are you using and why?",stuck:"Use your iPad to create a simple graph of your data. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'What kind of graph would be best to visualize this data: [brief description of your data]?'"},

{name:"Conclude",color:"#99FFFF",description:"Draw a conclusion based on your analysis and relate it back to your hypothesis.",metacognitive:"How well does my conclusion align with my original hypothesis? What new questions arise?",collaborative:"Engage in a structured debate about your conclusions. How do others' interpretations differ?",nos:"Scientific conclusions are based on evidence and reasoning. How does your conclusion reflect this?",stuck:"Use the claim-evidence-reasoning framework. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'Can you explain how to use the claim-evidence-reasoning framework for this conclusion: [your initial conclusion]?'"},

{name:"Present",color:"#99CCFF",description:"Communicate your findings to others through various means.",metacognitive:"How can I best communicate my findings? What aspects of my study are most important to highlight?",collaborative:"Practice presenting to a peer and ask for feedback. How can you improve your presentation?",nos:"Scientific communication is a crucial part of the scientific process. Why is this important?",stuck:"Use your iPad to create a simple presentation. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'What are the key elements I should include in a presentation about my scientific experiment?'"},

{name:"Review",color:"#CC99FF",description:"Reflect on your process and consider how to improve or extend your investigation.",metacognitive:"What worked well in my investigation? What would I do differently next time?",collaborative:"Exchange feedback with peers on each other's investigations. What can you learn from others' approaches?",nos:"Science is an iterative process. How might you build on or revise your investigation based on what you've learned?",stuck:"Create a list of 'lessons learned' from your investigation. Ask <a href='https://chat.securly.com/#/chats/newchat' target='_blank'>Scribly</a>: 'Based on this experiment [brief description], what are some ways I could improve or extend this investigation?'"}

];

const container = document.getElementById('cycle-container');

const draw = SVG().addTo(container).size('100%', '100%').viewbox(0, 0, 100, 100);

const centerX = 50, centerY = 50, radius = 40, nodeRadius = 9;

draw.circle(radius*2).fill('none').stroke({width:0.3,color:'#888'}).center(centerX, centerY);

const nodeGroup = draw.group();

let activeNode = null;

let activeIndex = 0;

cycleSteps.forEach((step, index) => {

const angle = (index / cycleSteps.length) * 2 * Math.PI - Math.PI / 2;

const x = centerX + radius * Math.cos(angle), y = centerY + radius * Math.sin(angle);

const circle = nodeGroup.circle(nodeRadius*2)

.fill(step.color)

.center(x, y)

.stroke({color:'#333',width:0.3});

const text = nodeGroup.text(step.name)

.font({size:2.2,anchor:'middle'})

.center(x,y);

text.build(true);

while (text.bbox().width > nodeRadius * 1.8) {

text.font({size:text.font('size')*0.9});

}

const group = nodeGroup.group().add(circle).add(text);

group.attr('role', 'button')

.attr('aria-label', `${step.name} step`)

.attr('tabindex', 0);

group.click(() => selectNode(index));

group.mouseover((e) => showTooltip(e, step.description));

group.mouseout(hideTooltip);

const nextIndex = (index + 1) % cycleSteps.length;

const nextAngle = (nextIndex / cycleSteps.length) * 2 * Math.PI - Math.PI / 2;

const nextX = centerX + radius * Math.cos(nextAngle), nextY = centerY + radius * Math.sin(nextAngle);

const arrowLength = 7, arrowWidth = 2;

const dx = nextX - x, dy = nextY - y;

const distance = Math.sqrt(dx*dx + dy*dy);

const unitX = dx / distance, unitY = dy / distance;

const startX = x + nodeRadius * unitX, startY = y + nodeRadius * unitY;

const endX = nextX - (nodeRadius + arrowWidth) * unitX, endY = nextY - (nodeRadius + arrowWidth) * unitY;

nodeGroup.line(startX, startY, endX, endY).stroke({width:0.3,color:'#888'});

const arrowHead = nodeGroup.polygon([

[endX, endY],

[endX - arrowWidth * (unitX + unitY), endY - arrowWidth * (unitY - unitX)],

[endX - arrowWidth * (unitX - unitY), endY - arrowWidth * (unitY + unitX)]

]).fill('#888');

});

const sidebar = document.getElementById("sidebar");

const closeBtn = document.querySelector(".close-btn");

function selectNode(index) {

const step = cycleSteps[index];

document.getElementById("sidebar-title").textContent = step.name;

document.getElementById("sidebar-description").textContent = step.description;

document.getElementById("sidebar-metacognitive").textContent = step.metacognitive;

document.getElementById("sidebar-collaborative").textContent = step.collaborative;

document.getElementById("sidebar-nos").textContent = step.nos;

document.getElementById("sidebar-stuck").innerHTML = step.stuck;

sidebar.classList.add("open");

activeIndex = index;

updateActiveNode();

}

function updateActiveNode() {

if (activeNode) {

activeNode.attr('stroke', {color:'#333',width:0.3});

}

activeNode = nodeGroup.children()[activeIndex];

activeNode.attr('stroke', {color:'#0066cc',width:1});

}

function hideSidebar() {

sidebar.classList.remove("open");

}

closeBtn.onclick = hideSidebar;

document.addEventListener('keydown', (e) => {

switch(e.key) {

case 'ArrowRight':

activeIndex = (activeIndex + 1) % cycleSteps.length;

selectNode(activeIndex);

break;

case 'ArrowLeft':

activeIndex = (activeIndex - 1 + cycleSteps.length) % cycleSteps.length;

selectNode(activeIndex);

break;

case 'Enter':

selectNode(activeIndex);

break;

case 'Escape':

hideSidebar();

break;

}

});

function showTooltip(event, text) {

const tooltip = document.getElementById('tooltip');

tooltip.textContent = text;

tooltip.style.left = `${event.clientX + 10}px`;

tooltip.style.top = `${event.clientY + 10}px`;

tooltip.style.opacity = 1;

}

function hideTooltip() {

const tooltip = document.getElementById('tooltip');

tooltip.style.opacity = 0;

}

// Initialize with the first step

selectNode(0);

// Responsive font size adjustment

function adjustFontSize() {

const container = document.getElementById('cycle-container');

const computedStyle = window.getComputedStyle(container);

const width = parseFloat(computedStyle.width);

const baseFontSize = width / 50; // Adjust this ratio as needed

document.documentElement.style.setProperty('--base-font-size', `${baseFontSize}px`);

}

window.addEventListener('resize', adjustFontSize);

adjustFontSize(); // Initial call

// Analytics

function logInteraction(action, stepName) {

// In a real implementation, this would send data to an analytics service

console.log(`User ${action} step: ${stepName}`);

}

// Attach logInteraction to node selection

function selectNodeWithLogging(index) {

logInteraction('selected', cycleSteps[index].name);

selectNode(index);

}

// Replace previous selectNode calls with selectNodeWithLogging

nodeGroup.children().forEach((node, index) => {

node.click(() => selectNodeWithLogging(index));

});

// Accessibility enhancements

nodeGroup.children().forEach((node, index) => {

node.attr('aria-label', `${cycleSteps[index].name} step`)

.attr('role', 'button')

.attr('tabindex', 0);

});

// Keyboard navigation

container.addEventListener('keydown', (e) => {

const currentNode = nodeGroup.children()[activeIndex];

switch(e.key) {

case 'ArrowRight':

e.preventDefault();

selectNodeWithLogging((activeIndex + 1) % cycleSteps.length);

break;

case 'ArrowLeft':

e.preventDefault();

selectNodeWithLogging((activeIndex - 1 + cycleSteps.length) % cycleSteps.length);

break;

case 'Enter':

case ' ':

e.preventDefault();

selectNodeWithLogging(activeIndex);

break;

}

});

// Progressive enhancement: Add animations if browser supports it

if (typeof document.body.animate === 'function') {

nodeGroup.children().forEach((node) => {

node.mouseover(function() {

this.animate(200).transform({ scale: 1.1 });

}).mouseout(function() {

this.animate(200).transform({ scale: 1 });

});

}

</script>

</body>

</html>

"""

Chris_Hofer · ‎08-10-2024

@LouisRosche ...

In general, Canvas has a set of HTML tags that it allows and certain HTML tags that are not allowed. You can find this information in the following Guides:

How do I use the HTML view in the Rich Content Edi... - Instructure Community - 876 (canvaslms.com)
Canvas HTML Editor Allowlist - Instructure Community - 387066 (canvaslms.com)

If you include HTML tags that are not allowed, Canvas will strip those out once you save your page.

Have you tried creating a separate HTML page offline which includes the code you want to use, then upload that HTML file to your course "Files" area, and then link to that file?

View solution in original post

chriscas · ‎08-24-2024

Hi @LouisRosche,

In addition to the info/comments provided by @Chris_Hofer and @themidiman, I wanted to add a bit more here. What you pasted in the community is full raw html page content. When you're using the RCE, you're only adding to the body content of HTML. Canvas is providing the head and other html organization elements around the RCE content. With the RCE, you should be able to paste some basic HTML, but you generally cannot provide your own JavaScript functionality within the editor and some inline CSS may also be removed. Admin can upload some JavaScript into a global account file, but most will only do so very sparingly because of the issues and support headache custom code can have when Canvas changes in the future. If you use static elements, Canvas will accept most (but not all) code.

Canvas has been designed this way from the beginning, mainly for security and performance reasons, and I honestly can't see this changing any time in the near future as a Canvas admin for a higher-ed institution myself. I know this is not the news you wanted to hear, but I'd rather be upfront about things, so you don't get your hopes up on any changes. Hopefully you can get some of your content in Canvas without the need for additional JavaScript/CSS.

-Chris

View solution in original post

Chris_Hofer · ‎08-10-2024

@LouisRosche ...

In general, Canvas has a set of HTML tags that it allows and certain HTML tags that are not allowed. You can find this information in the following Guides:

How do I use the HTML view in the Rich Content Edi... - Instructure Community - 876 (canvaslms.com)
Canvas HTML Editor Allowlist - Instructure Community - 387066 (canvaslms.com)

If you include HTML tags that are not allowed, Canvas will strip those out once you save your page.

Have you tried creating a separate HTML page offline which includes the code you want to use, then upload that HTML file to your course "Files" area, and then link to that file?

themidiman · ‎08-12-2024

Saw this thread and thought I would throw in my perspective:

I've been disappointed with the amount of HTML content interactivity you get with respect to HTML files served from the Canvas Files area. Often dependent external resources are blocked due to CORS restrictions. So page styles won't work 100% of the time and often embedded images get broken if you also want those to come from Canvas Files area. This is something that Blackboard did extremely well but it seems that Canvas wants to restrict what you can customize with respect to authoring software such as Adobe Dreamweaver unless you are able to afford something that can be imported via the SCORM module.

chriscas · ‎08-24-2024

Hi @LouisRosche,

In addition to the info/comments provided by @Chris_Hofer and @themidiman, I wanted to add a bit more here. What you pasted in the community is full raw html page content. When you're using the RCE, you're only adding to the body content of HTML. Canvas is providing the head and other html organization elements around the RCE content. With the RCE, you should be able to paste some basic HTML, but you generally cannot provide your own JavaScript functionality within the editor and some inline CSS may also be removed. Admin can upload some JavaScript into a global account file, but most will only do so very sparingly because of the issues and support headache custom code can have when Canvas changes in the future. If you use static elements, Canvas will accept most (but not all) code.

Canvas has been designed this way from the beginning, mainly for security and performance reasons, and I honestly can't see this changing any time in the near future as a Canvas admin for a higher-ed institution myself. I know this is not the news you wanted to hear, but I'd rather be upfront about things, so you don't get your hopes up on any changes. Hopefully you can get some of your content in Canvas without the need for additional JavaScript/CSS.

-Chris

Does Canvas only allow for 27 lines of embedded html code?

Admin

All Users

Instructional Designer

Instructor

Observer

Learning Mastery Gradebook will not load when I op...

office365 LIT error

Can I generate a Knowledge Deficiency Report (KDR)...

Bugs in Learning Mastery student grades view

Problemas de acceso para algunos alumnos

How would I archive all courses belonging to Terms...

Browser extension to color code different courses?

Canvas assignments

No "show question details" button in item banks???

Analytics, report, missing assignments

You're signed out

Does Canvas only allow for 27 lines of embedded html code?

Community Help

View our top guides and resources: