EduardPrigoana/prigoana.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

test!

Browse source
This commit is contained in:
EduardSkibidiEdger 2024-10-15 19:37:19 +03:00
parent cf92397966
commit daa71db374
6 changed files with 183 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

126
CS/ProblemSolvingProcess/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="/favicon.png">
<link rel="icon" type="image/x-icon" href="../../favicon.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Problem Solving Process Poster</title>
@ -32,9 +32,16 @@
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 2em;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
h1 {
.poster.visible {
opacity: 1;
}
/* Styling for dynamically generated content */
.poster h1 {
text-align: center;
color: #b657ff; /* Lilac color for header */
margin-bottom: 1.5em;
@ -42,7 +49,7 @@
font-weight: bold;
}
h2 {
.poster h2 {
color: #a29dfa; /* Softer lilac color */
border-bottom: 2px solid #b657ff; /* Lilac border */
padding-bottom: 0.5em;
@ -50,17 +57,13 @@
font-size: 1.5em;
}
p {
.poster p {
font-size: 1em;
line-height: 1.6;
margin-top: 0.5em;
color: #e0ceed; /* Light text color */
}
.section {
margin-bottom: 1.5em;
}
.example {
background-color: #211d26; /* Dark lilac tone for example box */
padding: 1em;
@ -75,29 +78,29 @@
/* Responsive Typography */
@media (max-width: 768px) {
h1 {
.poster h1 {
font-size: 1.8em;
}
h2 {
.poster h2 {
font-size: 1.3em;
}
p {
.poster p {
font-size: 0.95em;
}
}
@media (max-width: 480px) {
h1 {
.poster h1 {
font-size: 1.5em;
}
h2 {
.poster h2 {
font-size: 1.2em;
}
p {
.poster p {
font-size: 0.9em;
}
@ -106,43 +109,68 @@
}
}
</style>
<!-- Include marked.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div class="poster">
<h1>Problem Solving Process</h1>
<div class="section">
<h2>1. Define</h2>
<p><strong>Definition:</strong> Clearly understand and define the problem. Identify the root cause and gather all the necessary information.</p>
<div class="example">
<p><strong>Example:</strong> The machine on the assembly line keeps stopping randomly.</p>
<p><strong>Define:</strong> Understand that the issue is the machine’s unexpected stops. Gather data on when and how it happens.</p>
</div>
</div>
<div class="section">
<h2>2. Prepare</h2>
<p><strong>Definition:</strong> Plan potential solutions. Brainstorm ideas, gather resources, and consider possible approaches.</p>
<div class="example">
<p><strong>Example:</strong> Brainstorm possible causes like faulty wiring, overheating, or software glitches. Plan to inspect the machine's components and test each hypothesis.</p>
</div>
</div>
<div class="section">
<h2>3. Try</h2>
<p><strong>Definition:</strong> Implement the solution. Test the planned solution in a controlled environment or apply it step by step.</p>
<div class="example">
<p><strong>Example:</strong> Test by replacing a faulty component or adjusting software settings. Monitor if the machine stops unexpectedly after the changes.</p>
</div>
</div>
<div class="section">
<h2>4. Reflect</h2>
<p><strong>Definition:</strong> Assess the outcome of the solution. Did it work? What could be improved? Reflect on how effective the solution was.</p>
<div class="example">
<p><strong>Example:</strong> After a week of testing, determine whether the machine continues to operate smoothly. If it still malfunctions, revisit the Prepare phase for further investigation.</p>
</div>
</div>
<div class="poster" id="poster-content">
<!-- Markdown content will be injected here -->
</div>
<script>
// Function to fetch and render Markdown content
async function loadMarkdown() {
try {
const response = await fetch('./content.md');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const markdown = await response.text();
const htmlContent = marked.parse(markdown);
document.getElementById('poster-content').innerHTML = htmlContent;
// After inserting the HTML, wrap example sections
wrapExamples();
// Make the poster visible
document.querySelector('.poster').classList.add('visible');
} catch (error) {
console.error('Error fetching or parsing Markdown:', error);
document.getElementById('poster-content').innerHTML = '<p>Failed to load content.</p>';
}
}
// Function to wrap example sections in a div with class 'example'
function wrapExamples() {
const poster = document.getElementById('poster-content');
const paragraphs = poster.querySelectorAll('p');
paragraphs.forEach((p, index) => {
if (p.textContent.startsWith('Example:')) {
// Create a new div with class 'example'
const exampleDiv = document.createElement('div');
exampleDiv.className = 'example';
// Move the 'Example:' paragraph into the div
exampleDiv.appendChild(p.cloneNode(true));
// Check if the next paragraph starts with 'Define:'
const nextP = paragraphs[index + 1];
if (nextP && nextP.textContent.startsWith('Define:')) {
exampleDiv.appendChild(nextP.cloneNode(true));
// Remove the original paragraphs
nextP.remove();
}
// Replace the original 'Example:' paragraph with the div
p.replaceWith(exampleDiv);
}
});
}
// Load the Markdown content when the page loads
window.addEventListener('DOMContentLoaded', loadMarkdown);
</script>
</body>
</html>