full working project. Awaiting review.

assets/js/custom.js

@@ -1,9 +1,3 @@
-$(document).ready(function(){
-	$(".clickSay").click(function( event ){
-		var textToSay = $(this).text();
-		responsiveVoice.speak(textToSay);
-	});
-});
 (function($) {
 
 	$('.owl-carousel').owlCarousel({

assets/js/generator.js

@@ -0,0 +1,42 @@
+// Generator, by Geoff
+$(document).ready(function(){
+		$(".clickSay").click(function( event ){
+				var textToSay = $(this).text();
+				responsiveVoice.speak(textToSay);
+				});
+		$.getJSON("lessons.json", function(data) {
+				var wordsHtml = '';
+				var sidebarHtml = '';
+				var lessonIndex = 0;
+				$.each(data, function(lesson, wordList){
+						lessonIndex++;
+						$.each(wordList, function(key, word){
+								wordsHtml += '                  <div style="display: none;" class="col-md-4 lesson lesson-' + lessonIndex + '">';
+								wordsHtml += '                    <div class="service-item">';
+								if('img' in word){
+								wordsHtml += '                      <div class="icon" style="background-image:url(assets/images/'+ word.img +');"></div>';
+								} else if ('url' in word) {
+								wordsHtml += '                      <div class="icon" style="background-image:url('+ word.url +');"></div>';
+								} else {
+								wordsHtml += '                      <div class="icon" style="background-image:url(http://img.icons8.com/'+ word.name +'.png);"></div>';
+								}
+								wordsHtml += '                      <h4 class="clickSay">'+ word.name +'</h4>';
+								if('example' in word){
+								wordsHtml += '                      <p class="clickSay">'+ word.example +'</p>';
+								}
+								wordsHtml += '                    </div>';
+								wordsHtml += '                  </div>';
+								});
+						sidebarHtml += '<li><a href="#" onclick="swapView('+ lessonIndex +')">'+ lesson +'</a></li>';
+                    
+						});
+				$('#words').html(wordsHtml);
+				$('#lessonIndex').html(sidebarHtml);
+				swapView(1)
+		});
+});
+
+function swapView(newView){
+ $(".lesson").hide(1000);
+ $(".lesson-" + newView).show(1000);
+}

assets/js/owl-carousel.js

@@ -1917,7 +1917,7 @@
 						i = ((settings.center && n * -1) || 0),
 						position = (e.property && e.property.value !== undefined ? e.property.value : this._core.current()) + i,
 						clones = this._core.clones().length,
-						load = $.proxy(function(i, v) { this.load(v) }, this);
+						load = $.proxy(function(i, v) { this.on('load',v) }, this);
 					//TODO: Need documentation for this new option
 					if (settings.lazyLoadEager > 0) {
 						n += settings.lazyLoadEager;
@@ -1929,7 +1929,7 @@
 					}
 
 					while (i++ < n) {
-						this.load(clones / 2 + this._core.relative(position));
+						this.on('load',clones / 2 + this._core.relative(position));
 						clones && $.each(this._core.clones(this._core.relative(position)), load);
 						position++;
 					}

index.html

@@ -45,28 +45,7 @@ https://templatemo.com/tm-529-ramayana
             <!-- Services -->
             <section class="services">
               <div class="container-fluid">
-                <div class="row">
+                <div class="row" id="words">
-                  <div class="col-md-4">
-                    <div class="service-item">
-                      <div class="icon" style="background-image:url(http://img.icons8.com/cat.png);"></div>
-                      <h4 class="clickSay">Cat</h4>
-                      <p class="clickSay">The brown cat jumps over the lazy dog.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item">
-                      <div class="icon" style="background-image:url(http://img.icons8.com/dog.png);"></div>
-                      <h4 class="clickSay">Dog</h4>
-                      <p class="clickSay">The brown dog jumps over the lazy dog.</p>
-                    </div>
-                  </div>
-                  <div class="col-md-4">
-                    <div class="service-item">
-                      <div class="icon" style="background-image:url(http://img.icons8.com/apple.png);"></div>
-                      <h4 class="clickSay">Extravasation</h4>
-                      <p class="clickSay">At least this apple doesn't suffer from synovial extravasations.</p>
-                    </div>
-                  </div>
                 </div>
               </div>
             </section>
@@ -91,9 +70,7 @@ https://templatemo.com/tm-529-ramayana
                 <li><a href="index.html">Page d'accueil</a></li>
                 <li>
                   <span class="opener">Leçons</span>
-                  <ul>
+                  <ul id="lessonIndex">
-                    <li><a href="#">Leçon du 20/09/2019</a></li>
-                    <li><a href="#">Leçon du 90/09/2019</a></li>
                   </ul>
                 </li>
                 <li><a href="https://www.toutemonannee.com/connect">Lien vers le blog</a></li>
@@ -113,8 +90,8 @@ https://templatemo.com/tm-529-ramayana
 
   <!-- Scripts -->
   <!-- Bootstrap core JavaScript -->
-    <script src="vendor/jquery/jquery.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.responsivevoice.org/responsivevoice.js?key=9KldoXRR"></script>
 
     <script src="assets/js/browser.min.js"></script>
@@ -122,6 +99,7 @@ https://templatemo.com/tm-529-ramayana
     <script src="assets/js/transition.js"></script>
     <script src="assets/js/owl-carousel.js"></script>
     <script src="assets/js/custom.js"></script>
+    <script src="assets/js/generator.js"></script>
 </body>
 
 

lessons.json

@@ -1,7 +1,12 @@
-[
+{
-	"Feelings": {
+	"Feelings": [
-		{"name": "happy", "img": "happy.png"},
+		{"name": "dog"},
-		{"name": "sad", "img": "happy.png"},
+		{"name": "cat"},
-		{"name": "extravasted", "img": "extravasted.png"}
+		{"name": "apple", "url": "http://www.zoommedia.com/uk-staging/wp-content/uploads/sites/18/2017/11/small-apple.png"}
-	}
+	],
+	"Days of week": [
+		{"name": "monday", "img": "happy.png"},
+		{"name": "Tuesday", "img": "happy.png"},
+		{"name": "extravasion day", "img": "extravasted.png"}
 	]
+}