Files
g6-m2/Presentation_6.html
2025-12-01 11:11:26 +03:00

403 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Student Instructions</title>
<style>
@media print {
body {
font-family: Arial, sans-serif;
font-size: 14pt;
line-height: 1.5;
margin: 0;
padding: 15px;
background: white;
color: black;
}
.page-break {
page-break-after: always;
}
h1, h2, h3 {
color: black;
}
.no-print {
display: none;
}
.step-box {
border: 2px solid black;
padding: 15px;
margin: 20px 0;
break-inside: avoid;
}
.checklist {
border: 1px solid black;
padding: 10px;
margin: 15px 0;
}
.keyboard {
background: #f0f0f0;
padding: 3px 6px;
border: 1px solid #888;
border-radius: 3px;
font-family: monospace;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
td, th {
border: 1px solid black;
padding: 8px;
vertical-align: top;
}
}
@media screen {
body {
font-family: Arial, sans-serif;
max-width: 8.5in;
margin: 20px auto;
padding: 20px;
background: #f5f5f5;
}
.page {
background: white;
padding: 40px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border-radius: 5px;
}
.step-box {
border: 2px solid #4CAF50;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
background: #f9f9f9;
}
.checklist {
border: 2px solid #2196F3;
padding: 15px;
margin: 20px 0;
border-radius: 8px;
background: #e3f2fd;
}
.keyboard {
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
font-family: monospace;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
td, th {
border: 1px solid #ddd;
padding: 10px;
vertical-align: top;
}
th {
background: #4CAF50;
color: white;
}
tr:nth-child(even) {
background: #f9f9f9;
}
h1 {
color: #2c3e50;
border-bottom: 3px solid #4CAF50;
padding-bottom: 10px;
}
h2 {
color: #3498db;
}
.print-btn {
display: block;
width: 200px;
margin: 30px auto;
padding: 15px;
background: #4CAF50;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
}
}
.header {
text-align: center;
margin-bottom: 30px;
}
.mission {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px;
margin: 20px 0;
}
.timer {
text-align: center;
font-weight: bold;
background: #e7f3fe;
padding: 10px;
border-radius: 5px;
margin: 15px 0;
}
.step-number {
background: #4CAF50;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 10px;
font-weight: bold;
}
.done-checklist {
background: #d4edda;
border: 2px solid #28a745;
padding: 20px;
margin: 25px 0;
border-radius: 10px;
}
.tip {
background: #e8f4f8;
border-left: 4px solid #17a2b8;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="page">
<div class="no-print">
<button class="print-btn" onclick="window.print()">🖨️ Print This Page</button>
</div>
<div class="header">
<h1>📚 Document Organizing Challenge</h1>
<div class="mission">
<strong>YOUR MISSION:</strong> Transform a messy document about Russian technology into a professional organized report!
</div>
<div class="timer">
⏱️ 30-MINUTE CHALLENGE ⏱️
</div>
</div>
<hr>
<!-- STEP 1 -->
<div class="step-box">
<h2><span class="step-number">1</span> OPEN & READ (2 minutes)</h2>
<p><strong>What to do:</strong></p>
<ol>
<li>Open the file called <strong>"Russian Technology Adventure"</strong></li>
<li>Quickly scan through - find these 4 main sections:</li>
</ol>
<ul>
<li><strong>Land Technologies</strong></li>
<li><strong>Air Technologies</strong></li>
<li><strong>Sea Technologies</strong></li>
<li><strong>Space Technologies</strong></li>
</ul>
</div>
<!-- STEP 2 -->
<div class="step-box">
<h2><span class="step-number">2</span> MAKE CHAPTERS (8 minutes)</h2>
<p>These 4 sections will become your <strong>CHAPTERS</strong> using <span class="keyboard">Heading 1</span></p>
<h3>HOW TO:</h3>
<ol>
<li>Click anywhere in "<strong>Land Technologies</strong>"</li>
<li>Press <span class="keyboard">F11</span> to open Styles panel</li>
<li>Click <strong>"Heading 1"</strong></li>
<li>Repeat for all 4 main sections!</li>
</ol>
<div class="checklist">
<strong>✅ CHECK:</strong> All 4 sections should be BIG and BOLD!
</div>
<div class="tip">
💡 <strong>QUICK TIP:</strong> You can also press <span class="keyboard">Ctrl+1</span> to apply Heading 1 instantly!
</div>
</div>
<!-- STEP 3 -->
<div class="step-box">
<h2><span class="step-number">3</span> MAKE SUBHEADINGS (8 minutes)</h2>
<p>Find these 13 subheadings and make them <span class="keyboard">Heading 2</span>:</p>
<table>
<tr>
<th>LAND</th>
<th>AIR</th>
<th>SEA</th>
<th>SPACE</th>
</tr>
<tr>
<td>• Tanks</td>
<td>• Fighter Jets</td>
<td>• Submarines</td>
<td>• Spacecraft</td>
</tr>
<tr>
<td>• Mobile Missile Systems</td>
<td>• Drones</td>
<td>• Icebreaker Ships</td>
<td>• Rocket Engines</td>
</tr>
<tr>
<td>• Railway Troops</td>
<td>• Strategic Bombers</td>
<td>• Aircraft Carriers</td>
<td>• Navigation Systems</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>• Space Stations</td>
</tr>
</table>
<h3>QUICK WAY:</h3>
<ol>
<li>Click in the subheading</li>
<li>Press <span class="keyboard">Ctrl+2</span> (faster than F11!)</li>
<li>Move to next one</li>
</ol>
<div class="checklist">
<strong>✅ CHECK:</strong> All 13 should be medium-sized and organized!
</div>
</div>
<!-- STEP 4 -->
<div class="step-box">
<h2><span class="step-number">4</span> MAGIC TABLE OF CONTENTS (5 minutes)</h2>
<p>Watch the magic happen!</p>
<h3>HOW TO:</h3>
<ol>
<li>Press <span class="keyboard">Ctrl+Home</span> (go to very beginning)</li>
<li>Click: <strong>Insert → Table of Contents</strong></li>
<li>Click <strong>OK</strong></li>
<li><strong>POOF!</strong> Your contents page appears!</li>
</ol>
<div class="tip">
🎁 <strong>BONUS:</strong> Click any item in the table to jump there!
</div>
</div>
<!-- STEP 5 -->
<div class="step-box">
<h2><span class="step-number">5</span> FINISHING TOUCHES (5 minutes)</h2>
<h3>1. SEE YOUR WORK:</h3>
<p>Press <span class="keyboard">F5</span> to open Navigator</p>
<ul>
<li>See all your chapters listed!</li>
<li>Click to jump anywhere!</li>
</ul>
<h3>2. SAVE YOUR WORK:</h3>
<ol>
<li>Click <strong>File → Save As</strong></li>
<li>Name: <strong>"Russian_Tech_Organized_YOURNAME"</strong></li>
<li>Click <strong>Save</strong>!</li>
</ol>
<h3>3. SHOW YOUR TEACHER! ✅</h3>
</div>
<hr>
<!-- KEYBOARD SHORTCUTS -->
<div class="step-box">
<h2>⌨️ KEYBOARD SHORTCUTS</h2>
<table>
<tr>
<td><span class="keyboard">F11</span></td>
<td>Open Styles panel</td>
</tr>
<tr>
<td><span class="keyboard">Ctrl+1</span></td>
<td>Apply Heading 1 (fast!)</td>
</tr>
<tr>
<td><span class="keyboard">Ctrl+2</span></td>
<td>Apply Heading 2 (faster!)</td>
</tr>
<tr>
<td><span class="keyboard">F5</span></td>
<td>See all your chapters (Navigator)</td>
</tr>
<tr>
<td><span class="keyboard">Ctrl+Z</span></td>
<td>Undo if you make a mistake</td>
</tr>
<tr>
<td><span class="keyboard">Ctrl+Home</span></td>
<td>Go to beginning of document</td>
</tr>
</table>
</div>
<!-- FINAL CHECKLIST -->
<div class="done-checklist">
<h2>🏆 YOU'RE DONE WHEN:</h2>
<ul>
<li><strong>4 chapters</strong> (Heading 1)</li>
<li><strong>13 subheadings</strong> (Heading 2)</li>
<li><strong>Table of Contents</strong> page at start</li>
<li>✓ Document looks organized and professional!</li>
</ul>
<div style="text-align: center; margin-top: 20px; font-size: 16pt;">
Great work! You've just learned a professional skill! 🎉
</div>
</div>
<div class="no-print" style="text-align: center; margin-top: 40px; color: #666;">
<p>Print this page to have your instructions ready during the lesson!</p>
<button class="print-btn" onclick="window.print()">🖨️ Print This Page</button>
</div>
</div>
</body>
</html>