mdegNgg

index.html

<div class="wrapper">
  <img class="logolo" src="https://daff.dev/mechadash/logo.gif">
  <div class="content" id="a1">
    <h2>
      סקר ההוראה הגדול
    </h2><br/>
  שלום לכם וברוכים לסקר ההוראה הגדול.
  באמצעות השאלות הקרובות שתשאלו נוכל לבנות את מערך הידע שיאפשר שיפור אינקרמנטלי במערכת ההחלטות הפדגוגיות אשר בונות את הקרקע לשינוי הראדיקלי הצפוי במערכת החינוך הירושלמית.
    <button onclick="show(2)">התחל</button>
  </div>
  <div class="content" id="a2">
    <h2>
הזדהות</h2><br/>
   <br/>
    <input type="text" placeholder="כתובת דואר אלקטרוני"/><br/> 
    <input type="text" placeholder="סיסמא" /><br/> 
    <button onclick="show(3)">כניסה</button>
    <a href="#">הרשמה</a>
   </div>

  <div class="content" id="a3">
    <h2>
מה עושים פה בעצם?</h2><br/>
    תשתית החשיבה שאנו מציעים בדרך לקבלת ההחלטה האמיצה מתבססת על שני
צירים:<br/><br/>
    <ol class="ab">
    <li>מיפוי צרכי קהילת בית הספר ומוכנות הצוות לשינוי.</li>
    <li>זיהוי והבנה של החלום הפדגוגי המנחה שלכם כמנהלים ושל בית הספר
      (המפורטת בפרק הבא).</li>
    </ol><br/>
כלי זה נועד לסייע לכם לצייר תמונה ברורה של הצרכים, היכולות והאתגרים
המרכזיים שמאפיינים את קהילת בית הספר - תלמידים, הורים ומורים - שעל הבסיס
שלה ניתן יהיה לקבל את "ההחלטה האמיצה" לגבי שינוי הסדירות המתאים והנכון
לבית הספר שלך.<br/><br/>
    <div class="cdd"> 
      <span class="a">מיפוי הצרכים</span>
      <i class="gt"></i>
      <span class="b">זיהוי החלום הפדגוגי</span>
      <i class="gt"></i>
      <span class="c">החלטה אמיצה</span>
    </div>
  </div>

  <div class="content" id="a4">
    <h2>
מיפוי הצרכים</h2><br/>
    <ol>
      <li>למפות את התפיסות והצרכים של קהילת בית הספר.</li>
      <li>לאבחן את הנכונות והמסוגלות של צוות המורים לשינוי.</li>
      <li>לזהות הזדמנויות ומשאבים  שיתמכו בשינוי עתידי.</li>
    </ol>
    <button onclick="show(5)">המשך</button>
    <br/>
  </div>

  <div class="content" id="a5">
    <h2>
לרענן</h2><br/>
    לפני שניגשים לענות על השאלות, אנו ממליצים "לרענן את הזיכרון" ולעיין במסמכים קיימים שיש ברשותך ונוגעים ל:<br/><br/> 
    <ol>      
      <li>המצב סוציו-אקונומי של תלמידי בית הספר.</li>
      <li>ההישגים הלימודיים של תלמידי בית הספר.</li>
      <li>מצב האקלים החברתי בקרב תלמידי בית הספר.</li>
    </ol>
    <button onclick="show(6)">המשך</button>
    <br/>
  </div>

  <div class="content" id="a6">
    <h2>
מיפוי צרכי התלמידים</h2><br/>
כתבו במסגרת הריקה עד 3 משפטים שמתארים את הצרכים המרכזיים של תלמידי בית הספר שלך:
    <textarea></textarea>
    <br/>
    <button onclick="show(7)">המשך</button>
    <br/>
  </div>
  
</div>
<div class="koko">
<span onclick="show(1)">1</span>
<span onclick="show(2)">2</span>
<span onclick="show(3)">3</span>
<span onclick="show(4)">4</span>
<span onclick="show(5)">5</span>
<span onclick="show(6)">6</span>
<span onclick="show(7)">7</span>
<span onclick="show(8)">8</span>
<span onclick="show(9)">9</span>
</div>

mdegngg.markdown

mdegNgg

A Pen by Dor Kalev on CodePen.

License.

script.js

function show(i) {
    Array.from(document.getElementsByClassName('content')).forEach((e) => {
      e.style.display = 'none';
    });
  document.getElementById('a' + i).style.display = 'block';
  
}

scripts

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.scss

 @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;700&display=swap');
* {
  text-align: right;
  direction: rtl;  
}
body {
  background: url('https://daff.dev/mechadash/back.png');
  text-align: center;
  background-color: #f0f0f0;
  font-family: 'Heebo', sans-serif;
  color: black;
}

.logolo {
  width: 80px;
  height: 80px;
  margin: 20px;
  float: right;
  display: inline-block;
  margin-top: 0;
  padding-top: 0;
  position: absolute;
  right: 0;
  top: 0;
}

h1 {
  margin-top: 0;
  padding-top: 0;
  display: inline-block;
  font-size: 70px;
  font-weight: bold;
  color: black;
}

h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  display: inline-block;
  background: #48AF9A;
  color: white;
  font-size: 30px;
  line-height: 1.7em;
  font-family: heebo;
  font-weight: 600;
  padding: 0% 1% 0% 1%;  
}
.wrapper {
  border: 1px solid transparent;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
ol {
  &.ab {
    list-style-type: hebrew;
  }
  list-style-type: numbers;
  line-height: 1.3em;
  li {
    margin-right: 23px;
    &::marker {
      color: rgb(46, 129, 159);    
      font-weight: 700;
    }
  }
}
.cdd {
  margin-top: 30px;
  span {
    background: red;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    color: white;
    font-weight: 700;
  }
  .gt {
    padding: 0 8px;
    display: inline-block;
    &:after {
      content: '>';
      font-weight: 700;
      color: rgb(46, 129, 159);
    }
  }
  .a { background-color: #FEB125; }
  .b { background-color: #EA503B; }
  .c { background-color: #48AF9A; }
}
.content {
  display: none;
  color: #023846;
  line-height: 1.2em;
  font-size: 21px;
  direction: rtl;
  min-width: 400px;
  max-width: 600px;
  margin-right: 100px;
  margin-top: 120px;
  font-family: heebo;
  font-weight: 300;
  padding-bottom: 0;
}
strong {
  font-weight: 600;
}
#a6 {
  display: block;
}
a {
  color: black;
}
textarea {
  display: block;
  border: none;
  background: rgba(255,255,255,0.7);
  border-radius: 10px;
  font-weight: 600;
  color: 
  width: 100%;
  padding: 10px;
}
button {
  margin-top: 20px;
  display: inline-block;
  background-color: #F5AA1B;
  border: none;
  border-radius: 5px;
  font-weight: 600;
  color: white;
  padding: 5px 20px;
  box-shadow: 3px 3px 3px #aaaaaa;
  transition: 0.2s all;
  &:hover {
    transition: 0.2s all;
    padding: 10px 25px;
    font-size: 30px;
    margin-top: 15px;
  }
}

.koko {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-size: 30px;
  font-weight: 700;
  color: green;
  span {
    cursor: pointer;
    &:hover {
      opacity: 0.5;
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />