Found this content helpful? Log in or sign up to leave a like!

HTML Coding Issue from working in Gemini to not working when pasted into HTML editor

Jump to solution
john_hamilton
Community Member
‎06-17-2025 05:35 PM
I am attempting to load a HTML code into my Canvas shell to create a Dissertation Calculator (completion generator) for my doctoral students. I am running into some formatting issues and believe it may be due to something blocking me from the IT side. I am pasting the code below, but based on the instructions I have, it not be working due to perhaps one of the following:
  1. Security Restrictions (Content Security Policy - CSP): Canvas environments often have strict Content Security Policies in place. These policies can block external resources like the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) or even inline JavaScript if they're not explicitly whitelisted. The current code uses an external CDN for Tailwind and inline JavaScript.
  2. iFrame Sandboxing: If you're embedding this HTML in an iFrame, the iFrame's sandbox attributes might be preventing scripts from running or certain elements from loading.
  3. HTML Sanitization: Canvas might be stripping out or modifying certain HTML tags or attributes that it deems unsafe or unsupported, which could break the layout or functionality.
  4. Specific Embedding Methods: Canvas might require a specific method for embedding custom HTML, such as using a "File Upload" to host the HTML and then linking to it, or using their "Embed Code" feature in a particular way.

    Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dissertation Calculator</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f0f4f8; /* Light blue-grey background */
}
.progress-bar-inner {
transition: width 0.3s ease-in-out;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-4xl border border-gray-200">
<h1 class="text-4xl font-bold text-center text-indigo-700 mb-8">Dissertation Progress Calculator</h1>

<!-- Input Section -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="flex flex-col">
<label for="startDate" class="text-gray-700 font-semibold mb-2">Start Date:</label>
<input type="date" id="startDate" class="p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="flex flex-col">
<label for="targetDate" class="text-gray-700 font-semibold mb-2">Target Completion Date:</label>
<input type="date" id="targetDate" class="p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="flex flex-col">
<label for="totalWordCount" class="text-gray-700 font-semibold mb-2">Target Total Word Count:</label>
<input type="number" id="totalWordCount" class="p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g., 50000">
</div>
</div>

<!-- Calculated Results -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8 text-center bg-indigo-50 p-6 rounded-lg border border-indigo-200">
<div>
<p class="text-lg text-indigo-800 font-medium">Total Weeks:</p>
<p id="totalWeeks" class="text-3xl font-bold text-indigo-900 mt-1">0</p>
</div>
<div>
<p class="text-lg text-indigo-800 font-medium">Words Per Week (Target):</p>
<p id="wordsPerWeek" class="text-3xl font-bold text-indigo-900 mt-1">0</p>
</div>
</div>

<!-- Chapters/Sections Input -->
<div class="mb-8 border-t border-gray-200 pt-8">
<h2 class="text-2xl font-bold text-indigo-700 mb-6">Chapters/Sections</h2>
<div id="chaptersContainer" class="space-y-6">
<!-- Chapter items will be appended here by JavaScript -->
</div>
<button id="addChapterBtn" class="mt-6 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-md shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors duration-200">
+ Add Chapter/Section
</button>
</div>

<!-- Overall Progress -->
<div class="border-t border-gray-200 pt-8 mt-8">
<h2 class="text-2xl font-bold text-indigo-700 mb-4">Overall Dissertation Progress</h2>
<div class="w-full bg-gray-200 rounded-full h-8 mb-4 overflow-hidden">
<div id="overallProgressBar" class="progress-bar-inner bg-green-500 h-full text-white text-right pr-4 flex items-center justify-end rounded-full" style="width: 0%;">0%</div>
</div>
<p class="text-gray-600 text-sm">Completed Word Count: <span id="completedWordCount">0</span> / <span id="displayTotalWordCount">0</span></p>
</div>

<!-- Guidance/Tips Section -->
<div class="mt-12 p-6 bg-yellow-50 rounded-lg border border-yellow-200">
<h2 class="text-2xl font-bold text-yellow-800 mb-4">Dissertation Tips</h2>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>Break down your dissertation into manageable chunks.</li>
<li>Set realistic daily or weekly word count goals.</li>
<li>Schedule dedicated writing time and stick to it.</li>
<li>Don't aim for perfection in the first draft; just get words on the page.</li>
<li>Seek feedback from your advisor and peers regularly.</li>
<li>Take breaks to avoid burnout and maintain productivity.</li>
</ul>
</div>
</div>

<script>
// DOM Elements
const startDateInput = document.getElementById('startDate');
const targetDateInput = document.getElementById('targetDate');
const totalWordCountInput = document.getElementById('totalWordCount');
const totalWeeksDisplay = document.getElementById('totalWeeks');
const wordsPerWeekDisplay = document.getElementById('wordsPerWeek');
const chaptersContainer = document.getElementById('chaptersContainer');
const addChapterBtn = document.getElementById('addChapterBtn');
const overallProgressBar = document.getElementById('overallProgressBar');
const completedWordCountDisplay = document.getElementById('completedWordCount');
const displayTotalWordCount = document.getElementById('displayTotalWordCount');

let chapterCount = 0; // To keep track of chapters and assign unique IDs

// Function to calculate weeks between two dates
function getWeeksBetweenDates(start, end) {
if (!start || !end) return 0;
const startDate = new Date(start);
const endDate = new Date(end);
const millisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
const diffMilliseconds = endDate.getTime() - startDate.getTime();
return Math.max(0, Math.floor(diffMilliseconds / millisecondsPerWeek));
}

// Function to update calculations
function updateCalculations() {
const startDate = startDateInput.value;
const targetDate = targetDateInput.value;
const totalWordCount = parseInt(totalWordCountInput.value) || 0;

const totalWeeks = getWeeksBetweenDates(startDate, targetDate);
totalWeeksDisplay.textContent = totalWeeks;

const wordsPerWeek = totalWeeks > 0 ? Math.ceil(totalWordCount / totalWeeks) : 0;
wordsPerWeekDisplay.textContent = wordsPerWeek;

// Update overall progress
updateOverallProgress();
}

// Function to create a new chapter element
function createChapterElement(id) {
const chapterDiv = document.createElement('div');
chapterDiv.id = `chapter-${id}`;
chapterDiv.className = 'chapter-item bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-200';
chapterDiv.innerHTML = `
<div class="flex items-center justify-between mb-4">
<h3 class="text-xl font-semibold text-gray-800">Chapter/Section ${id}</h3>
<button class="remove-chapter-btn text-red-500 hover:text-red-700 font-bold text-xl leading-none">
&times;
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div class="flex flex-col">
<label for="chapterName-${id}" class="text-gray-600 mb-1">Name:</label>
<input type="text" id="chapterName-${id}" class="chapter-name p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-400" placeholder="e.g., Introduction">
</div>
<div class="flex flex-col">
<label for="targetChapterWordCount-${id}" class="text-gray-600 mb-1">Target Word Count:</label>
<input type="number" id="targetChapterWordCount-${id}" class="target-chapter-word-count p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-400" placeholder="e.g., 5000">
</div>
</div>
<div class="flex flex-col mb-4">
<label for="actualChapterWordCount-${id}" class="text-gray-600 mb-1">Actual Word Count:</label>
<input type="number" id="actualChapterWordCount-${id}" class="actual-chapter-word-count p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-400" value="0">
</div>
<div class="w-full bg-gray-200 rounded-full h-6 overflow-hidden">
<div id="chapterProgressBar-${id}" class="progress-bar-inner bg-blue-500 h-full text-white text-right pr-3 flex items-center justify-end rounded-full" style="width: 0%;">0%</div>
</div>
`;
chaptersContainer.appendChild(chapterDiv);

// Add event listeners to the new inputs
const targetChapterWC = chapterDiv.querySelector(`#targetChapterWordCount-${id}`);
const actualChapterWC = chapterDiv.querySelector(`#actualChapterWordCount-${id}`);
const removeBtn = chapterDiv.querySelector('.remove-chapter-btn');

[targetChapterWC, actualChapterWC].forEach(input => {
input.addEventListener('input', () => updateChapterProgress(id));
input.addEventListener('input', updateOverallProgress); // Update overall on chapter changes
});

removeBtn.addEventListener('click', () => {
chapterDiv.remove();
updateOverallProgress(); // Update overall progress after removing a chapter
});

// Initial update for the new chapter
updateChapterProgress(id);
}

// Function to update progress for a specific chapter
function updateChapterProgress(id) {
const target = parseInt(document.getElementById(`targetChapterWordCount-${id}`).value) || 0;
const actual = parseInt(document.getElementById(`actualChapterWordCount-${id}`).value) || 0;
const progressBar = document.getElementById(`chapterProgressBar-${id}`);

let percentage = 0;
if (target > 0) {
percentage = Math.min(100, (actual / target) * 100);
}

progressBar.style.width = `${percentage}%`;
progressBar.textContent = `${Math.round(percentage)}%`;

// Change color based on progress
if (percentage >= 100) {
progressBar.classList.remove('bg-blue-500');
progressBar.classList.add('bg-green-500');
} else {
progressBar.classList.remove('bg-green-500');
progressBar.classList.add('bg-blue-500');
}
}

// Function to update overall dissertation progress
function updateOverallProgress() {
const totalTargetWordCount = parseInt(totalWordCountInput.value) || 0;
displayTotalWordCount.textContent = totalTargetWordCount; // Update the display

let totalActualCompletedWords = 0;
const chapterActualWordCounts = document.querySelectorAll('.actual-chapter-word-count');
chapterActualWordCounts.forEach(input => {
totalActualCompletedWords += parseInt(input.value) || 0;
});

completedWordCountDisplay.textContent = totalActualCompletedWords;

let overallPercentage = 0;
if (totalTargetWordCount > 0) {
overallPercentage = Math.min(100, (totalActualCompletedWords / totalTargetWordCount) * 100);
}

overallProgressBar.style.width = `${overallPercentage}%`;
overallProgressBar.textContent = `${Math.round(overallPercentage)}%`;

// Change color based on progress
if (overallPercentage >= 100) {
overallProgressBar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-blue-500');
overallProgressBar.classList.add('bg-green-500');
} else if (overallPercentage > 50) {
overallProgressBar.classList.remove('bg-red-500', 'bg-yellow-500', 'bg-green-500');
overallProgressBar.classList.add('bg-blue-500');
} else if (overallPercentage > 25) {
overallProgressBar.classList.remove('bg-red-500', 'bg-blue-500', 'bg-green-500');
overallProgressBar.classList.add('bg-yellow-500');
} else {
overallProgressBar.classList.remove('bg-yellow-500', 'bg-blue-500', 'bg-green-500');
overallProgressBar.classList.add('bg-red-500');
}
}

// Event Listeners for main inputs
startDateInput.addEventListener('input', updateCalculations);
targetDateInput.addEventListener('input', updateCalculations);
totalWordCountInput.addEventListener('input', updateCalculations);
totalWordCountInput.addEventListener('input', updateOverallProgress); // Also update overall progress if total changes

// Event Listener for Add Chapter button
addChapterBtn.addEventListener('click', () => {
chapterCount++;
createChapterElement(chapterCount);
});

// Initial setup on page load
document.addEventListener('DOMContentLoaded', () => {
// Set default dates (e.g., today and 6 months from now)
const today = new Date();
startDateInput.valueAsDate = today;

const sixMonthsLater = new Date();
sixMonthsLater.setMonth(today.getMonth() + 6);
targetDateInput.valueAsDate = sixMonthsLater;

// Trigger initial calculations
updateCalculations();
updateOverallProgress(); // Ensure overall progress is calculated on load too
});

// Add an initial chapter
document.addEventListener('DOMContentLoaded', () => {
if (chaptersContainer.children.length === 0) {
chapterCount++;
createChapterElement(chapterCount);
}
});

</script>
</body>
</html>
Labels (1)
Labels
0 Likes
1 Solution

Jump to solution
Gabriel33
Community Participant
‎06-17-2025 05:59 PM

The Canvas RCE editor has a pretty short allowlist, and you can't include any JS or CSS as an instructor. Perhaps your Canvas admin can add it, but it'd have to be added to every course, which they may not be willing to do.

Please check the allowed HTML tags here:  Canvas HTML Editor Allowlist - Instructure Community - 387066

 

Some people have had some success in the past by uploading the HTML file with the code, such as seen in this post, but it's not something that's supported by Instructure:  Solved: Uploaded HTML files no longer show mathjax (or any... - Instructure Community - 639794  

 

As mentioned in your quote, uploading it somewhere else and using an iFrame is generally the recommended alternative:  Embedding an Uploaded HTML page in an iFrame - Instructure Community - 278621  

View solution in original post