Eine kleine Anleitung wie man mit 10 Finger Schreibmaschiene schreibt
Code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<style>
.correct{
color: forestgreen;
}
.incorrect{
color: red;
text-decoration: underline;
}
.header{
position: sticky;
top: 0;
z-index: 5;
width: 100%;
padding: 10px;
background: white;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.07);
}
.header .container{
position: relative;
}
.logo{
font-family: sanMateo;
font-size: 1.5rem;
}
.setGoal{
position: absolute;
top: 0px;
right: 10px;
font-size: 1.5rem;
font-family: sanMateo;
}
.main{
padding: 50px 0;
}
.left{
padding: 20px;
width: 100%;
height: 75vh;
background: lavender;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.rules{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.4rem;
}
.rules a{
width: max-content;
display: block;
padding: 5px 20px;
background: skyblue;
border: 2px solid #000;
text-decoration: none;
color: black;
font-weight: bold;
border-radius: 5px;
}
.right{
padding: 20px;
width: 100%;
height: 75vh;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.top{
width: 100%;
height: auto;
margin-bottom: 0px;
overflow: auto;
}
.top p{
padding: 5px 20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.5rem;
letter-spacing: .15rem;
line-height: 2.5rem;
user-select: none;
}
.bottom{
width: 100%;
height: 45%;
}
.bottom .msg{
width: 100%;
height: 100%;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.5rem;
letter-spacing: .15rem;
line-height: 2.5rem;
outline: none;
resize: none;
border-radius: 5px;
padding: 5px 20px;
}
.bottom .msg:focus{
border: 2px solid #000;
}
.btn{
width: 100%;
padding: 0px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
font-size: 1.9rem;
margin-bottom: 30px;
border: 2px solid #000;
border-radius: 5px;
background: skyblue;
outline: none;
}
li a{
word-break: break-word;
display: block;
width:100% !important;
}
form{
margin-bottom: 30px;
}
@media(max-width: 540px){
.left, .right{
height: auto;
margin-bottom: 50px
}
.bottom .msg{
min-height: 300px;
}
}
.lesson{
padding: 50px 0;
}
.lesson .left h3{
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
}
.lesson .left ul{
list-style: none;
margin: 0;
padding: 0;
margin-top: 30px;
}
.lesson .right ul li{
margin-bottom: 10px;
}
.lesson .left ul li a{
display: block;
text-decoration: none;
padding: 7px 20px;
margin-bottom: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.4rem;
color: darkblue;
border-radius: 5px;
}
.lesson .left ul li a:hover{
color: black;
background: skyblue;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.lesson .left ul li a.active{
color: black;
background: skyblue;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
.testbtn{
margin-top: 30px;
text-align: center;
color: black !important;
background: skyblue;
font-size: 1.5rem !important;
font-weight: bold;
border: 2px solid #000;
}
.lesson .right{
padding: 20px 30px;
overflow: auto;
}
.lesson .right h3{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: bold;
}
.lesson .right hr{
border: 2px solid #000;
}
.lesson .right{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 1.4rem;
letter-spacing: .15rem;
line-height: 2.5rem;
}
.courseImg{
width: 100%;
margin-top: 50px;
}
.courseImg img{
width: 100%;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
table{
width: 100%;
margin-bottom: 30px;
}
th{
background: #ccc;
}
td, th{
padding: 5px 10px;
border: 1px solid #000;
text-align: center;
}
@media(max-width: 540px){
table{
font-size: 18px
}
td, th{
padding: 0
}
}
.right{
display:none;
}
#lekbild2{
display:none;
}
.testbtn{
cursor:pointer;
}
.testbtn:hover{
background:rgba(2,172,172,1);
}
.an{
display:block;
}
</style>
<section class="lesson">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-12">
<div class="left">
<h3>Kurse</h3>
<ul>
<li id="lebut1" data-box="right1" class="testbtn">Lektion 01</li>
<li id="lebut2" data-box="right2" class="testbtn">Lektion 02</li>
<li id="lebut3" data-box="right3" class="testbtn">Lektion 03</li>
<li id="lebut4" data-box="right4" class="testbtn">Lektion 04</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-8 col-sm-12">
<div id="right1" class="right">
<h3>Lektion 01</h3>
<hr>
<p>Bevor Sie anfangen etwas zu tippen, sollten Sie sich immer etwas merken. </p><ul>
<li><strong>Erstens</strong> - Sitzen Sie immer gerade.</li>
<li><strong>Zweitens</strong> – Halten Sie Ihre acht Finger auf den mittleren Tasten der Tastatur und den Daumen auf der Leertaste (wie im Bild unten gezeigt).</li>
<li><strong>Drittens</strong> - Schauen Sie immer, was Sie tippen (schauen Sie auf den Bildschirm), schauen Sie niemals in die Tastatur.</li>
</ul>
<p></p>
</div>
<div id="right2" class="right">
<h3>Lektion 02</h3>
<hr>
<p>In dieser Lektion lernen Sie, wie Sie Ihre Finger in den mittleren Tasten der Tastatur positionieren.</p>
<table>
<tbody><tr>
<th>Tasten der Tastatur</th>
<th>Fingerposition</th>
</tr>
<tr>
<td><strong>F & G</strong></td>
<td>Zeigefinger der linken Hand</td>
</tr>
<tr>
<td><strong>D</strong></td>
<td>Mittelfinger der linken Hand</td>
</tr>
<tr>
<td><strong>S</strong></td>
<td>Ringfinger der linken Hand</td>
</tr>
<tr>
<td><strong>EIN</strong></td>
<td>Kleiner Finger der linken Hand</td>
</tr>
<tr>
<td><strong>J&H</strong></td>
<td>Zeigefinger der rechten Hand</td>
</tr>
<tr>
<td><strong>K</strong></td>
<td>Mittelfinger der rechten Hand</td>
</tr>
<tr>
<td><strong>L</strong></td>
<td>Ringfinger der rechten Hand</td>
</tr>
<tr>
<td><strong>;</strong></td>
<td>Kleiner Finger der rechten Hand</td>
</tr>
</tbody></table>
<p>
</p><ul>
<li>Verwenden Sie für den Raum den Daumen.</li>
<li>
Während Sie die Buchstaben eingeben, verwenden Sie die kleinen Finger, um die Umschalttaste zu drücken. Ex. Wenn Sie Großbuchstaben „G“, „F“, „D“, „S“, „A“ eingeben, verwenden Sie den kleinen Finger der rechten Hand, um die Umschalttaste zu drücken, und für Großbuchstaben „H“, „J“, „K“, „L“. ", ":" verwenden Sie den kleinen Finger der linken Hand, um die Umschalttaste zu drücken.
</li>
</ul>
<p></p>
</div>
</div>
<div id="right3" class="right">
<h3>Lektion 03</h3>
<hr>
<p>
In dieser Lektion lernen Sie, wie Sie Ihre Finger in den oberen Tasten der Tastatur positionieren.
</p>
<table>
<tbody><tr>
<th>Tasten der Tastatur</th>
<th>Fingerposition</th>
</tr>
<tr>
<td><strong>R&T</strong></td>
<td>Zeigefinger der linken Hand</td>
</tr>
<tr>
<td><strong>E</strong></td>
<td>Mittelfinger der linken Hand</td>
</tr>
<tr>
<td><strong>W</strong></td>
<td>Ringfinger der linken Hand</td>
</tr>
<tr>
<td><strong>Q</strong></td>
<td>Kleiner Finger der linken Hand</td>
</tr>
<tr>
<td><strong>U & Y</strong></td>
<td>Zeigefinger der rechten Hand</td>
</tr>
<tr>
<td><strong>ich</strong></td>
<td>Mittelfinger der rechten Hand</td>
</tr>
<tr>
<td><strong>Ö</strong></td>
<td>Ringfinger der rechten Hand</font></font></td>
</tr>
<tr>
<td><strong>P</strong></td>
<td>Kleiner Finger der rechten Hand</td>
</tr>
</tbody></table>
<p>
</p><ul>
<li>Verwenden Sie für den Raum den Daumen.</li>
<li>
Während Sie die Buchstaben eingeben, verwenden Sie die kleinen Finger, um die Umschalttaste zu drücken. Ex. Wenn Sie Großbuchstaben „T“, „R“, „E“, „W“, „Q“ eingeben, verwenden Sie den kleinen Finger der rechten Hand, um die Umschalttaste zu drücken, und für Großbuchstaben „Y“, „U“, „I“, „O“. ", "P" verwenden Sie den kleinen Finger der linken Hand, um die Umschalttaste zu drücken. </li>
<li>
<strong> Wichtig - </strong>Heben Sie beim Drücken der oberen Tasten nur den Finger an, dessen Taste Sie tippen möchten, und heben Sie keine anderen Finger an. Ex. Wenn Sie "Y" eingeben möchten, heben Sie nur den Zeigefinger der rechten Hand, während Sie die anderen Finger auf der mittleren Taste der Tastatur lassen. </li>
</ul>
<p></p>
</div>
<div id="right4" class="right">
<h3>Lektion 04</h3>
<hr>
<p>
In dieser Lektion lernen Sie, wie Sie Ihre Finger in den unteren Tasten der Tastatur positionieren.
</p>
<table>
<tbody><tr>
<th>Tasten der Tastatur</th>
<th>Fingerposition</th>
</tr>
<tr>
<td><strong>V&B</strong></td>
<td>Zeigefinger der linken Hand</td>
</tr>
<tr>
<td><strong>C</strong></td>
<td>Mittelfinger der linken Hand</td>
</tr>
<tr>
<td><strong>x</strong></td>
<td>Ringfinger der linken Hand</td>
</tr>
<tr>
<td><strong>Z</strong></td>
<td>Kleiner Finger der linken Hand</td>
</tr>
<tr>
<td><strong>N & M</strong></td>
<td>Zeigefinger der rechten Hand</td>
</tr>
<tr>
<td><strong>,</strong></td>
<td>Mittelfinger der rechten Hand</td>
</tr>
<tr>
<td><strong>.</strong></td>
<td>Ringfinger der rechten Hand</td>
</tr>
<tr>
<td><strong>/</strong></td>
<td>Kleiner Finger der rechten Hand</td>
</tr>
</tbody></table>
<p>
</p><ul>
<li>Verwenden Sie für den Raum den Daumen.</li>
<li>
Während Sie die Buchstaben eingeben, verwenden Sie die kleinen Finger, um die Umschalttaste zu drücken. <br>Ex. Wenn Sie Großbuchstaben „B“, „V“, „C“, „X“, „Z“ eingeben, verwenden Sie den kleinen Finger der rechten Hand, um die Umschalttaste zu drücken, und für Großbuchstaben „N“, „M“, „<“, „> ", "?" Verwenden Sie den kleinen Finger der linken Hand, um die Umschalttaste zu drücken.
</li>
<li>
<strong>Wichtig -</strong>Heben Sie beim Drücken der oberen Tasten nur den Finger an, dessen Taste Sie tippen möchten, und heben Sie keine anderen Finger an.
Ex. Wenn Sie „B“ eingeben möchten, heben Sie nur den Zeigefinger der linken Hand, während Sie die anderen Finger auf der mittleren Taste der Tastatur lassen.
</li>
</ul>
<p></p>
</div>
</div>
</div>
<div class="row bildrow" id="lekbild1">
<div class="courseImg">
<img src="/image/one.png" alt="">
</div>
</div>
<div class="row bildrow" id="lekbild2">
<div class="courseImg">
<img src="/image/two.png" alt="">
</div>
</div>
</div>
</section>
<script>
ele=document.querySelectorAll('.testbtn');
ri=document.querySelectorAll('.right');
ele.forEach(function(d){
d.addEventListener('click',function(){
ri.forEach(function(h){
h.classList.remove('an');
})
document.getElementById(d.getAttribute('data-box')).classList.add('an');
})
})
</script>