index.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!doctype html>
  2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
  3. <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
  4. <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
  5. <!--[if gt IE 8]><!-->
  6. <html class="no-js" lang=""> <!--<![endif]-->
  7. <head>
  8. <meta charset="utf-8">
  9. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10. <title>The Yazik Chinese Trainer</title>
  11. <meta name="description" content="entraînement à la langue chinoise">
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13. <link rel="apple-touch-icon" href="apple-touch-icon.png">
  14. <link rel="stylesheet" href="css/bootstrap.min.css">
  15. <style>
  16. body {
  17. padding-top: 50px;
  18. padding-bottom: 20px;
  19. }
  20. </style>
  21. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  22. <link rel="stylesheet" href="css/main.css">
  23. <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
  24. </head>
  25. <body>
  26. <!--[if lt IE 8]>
  27. <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  28. <![endif]-->
  29. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  30. <div class="container">
  31. <div class="navbar-header">
  32. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  33. <span class="sr-only">Toggle navigation</span>
  34. <span class="icon-bar"></span>
  35. <span class="icon-bar"></span>
  36. <span class="icon-bar"></span>
  37. </button>
  38. <a class="navbar-brand" href="#">The Yazik Chinese Trainer</a>
  39. </div>
  40. <div id="navbar" class="navbar-collapse collapse">
  41. <form class="navbar-form navbar-right" role="form">
  42. <div class="form-group">
  43. <input type="text" placeholder="Adresse électronique" class="form-control">
  44. </div>
  45. <div class="form-group">
  46. <input type="password" placeholder="Mot de passe" class="form-control">
  47. </div>
  48. <button type="submit" class="btn btn-success">Sign in</button>
  49. </form>
  50. </div><!--/.navbar-collapse -->
  51. </div>
  52. </nav>
  53. <!-- Main jumbotron for a primary marketing message or call to action -->
  54. <div class="jumbotron">
  55. <div class="container">
  56. <h2 class="titre1">Salle d'entraînement de la langue chinoise</h2>
  57. <p>Vous trouverez ici des exercices sous forme de quizzes, flashcards et autres pour apprendre,
  58. réviser, perfectionner votre connaissance du chinois mandarin</p>
  59. <p>Les exercices sont basés sur les listes de vocabulaires HSK, sur les cours FSI et DLI
  60. (voir mon site principal pour en prendre connaissance), ainsi que divers cours glanés sur internet. </p>
  61. <p>Tout le site est bien entendu libre et gratuit.</p>
  62. </div>
  63. </div>
  64. <div class="container">
  65. <!-- Example row of columns -->
  66. <div class="row">
  67. <div class="col-md-4">
  68. <img src="img/1.png" alt="Image d'un exercice" style="width:300px;" >
  69. </div>
  70. <div class="col-md-8">
  71. <h2>Type 1</h2>
  72. <p>Cet exercice permet de mémoriser les hanzis, le pinyin et leur signification en français, anglais
  73. et autres langues (par la suite)</p>
  74. <p>Cet exercice est basé sur un concept de <a href="https://www.chineseinflow.com/">Chinese in Flow</a>. Il
  75. ajoute les traductions en français, et la possibilité d'utiliser d'autres sources de vocabulaire. J'jouterai d'autres langues de traduction
  76. dès que ce sera possible. Les sons sont issus du vocabulaire enregistré pour le projet <em>Shtooka</em></p>
  77. <p>Les exercices ne seront pas figés comme dans la version originale où les HSKs sont découpés en lots de 30 mots, toujours les mêmes dans le même lot.
  78. </p>
  79. <p>J'ai ré-écrit complètement le programme. Il n'y a pas de sources pour le programme original. Les techniques utilisées sont aussi différentes. (pas de canvas)</p>
  80. <p>Vous pourre choisir également entre l'écriture simplifiée et l'écriture traditionnelle.</p>
  81. <p><a class="btn btn-default" href="game1/game1-index.html" role="button">Commencez ici &raquo;</a></p>
  82. </div>
  83. </div>
  84. <div class="row">
  85. <div class="col-md-4">
  86. <img src="img/2.png" alt="Image d'un exercice" style="width:300px;" >
  87. </div>
  88. <div class="col-md-8">
  89. <h2>Type 2</h2>
  90. <p>Cet exercice permet de mémoriser les hanzis, le pinyin et leur signification en français, anglais ...
  91. et autres langues (par la suite.)</p>
  92. <p>Cet exercice est basé sur la saisie de "pinyin", "hanzi", français, anglais ou autre ...</p>
  93. <p>Il est prévu d'utiliser ce principe pour construire un apprentissage progressif du chinois par leçons très courtes
  94. , avec SOIT une partie grammaticale, SOIT des mots nouveaux (en très petits nombres (2 ou 3) pour éviter la surcharge.</p>
  95. <p>Chaque leçon sera donc composée du "cours" (mot OU vocabulaire) et de plein de petits exercices basés sur les mots déjà connus.</p>
  96. <p>Je vais essayer de ne pas "bourrer" les crânes avec trop d'informations simultanées.</p>
  97. <p><a class="btn btn-default" href="game2/game2-index.html" role="button">Commencez ici &raquo;</a></p>
  98. </div>
  99. </div>
  100. <div class="row">
  101. <div class="col-md-4">
  102. <img src="img/3.png" alt="Image d'un exercice" style="width:300px;" >
  103. </div>
  104. <div class="col-md-8">
  105. <h2>Type 3</h2>
  106. <p>Exercice appelé "cloze deletion".</p>
  107. <p>Un "trou" (un ou plusieurs mots) est inséré dans un texte en chinois. La définition en français est donnée en-dessous. Il faut entrer ce qui manque dans l'espace prévu à cet effet.</p>
  108. <p><a class="btn btn-default" href="game3/game3-index.html" role="button">Commencez ici &raquo;</a></p>
  109. </div>
  110. </div>
  111. <hr>
  112. <footer>
  113. <p>&copy; Eric Streit 2018</p><p> Images de fond des exercices 1 et 2:
  114. <a href="https://openclipart.org/">Openclipart</a>, Icones des boutons: projet Gnome <a href="https://www.gnome.org">Gnome Project</a></p>
  115. </footer>
  116. </div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  117. <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
  118. <script src="js/vendor/bootstrap.min.js"></script>
  119. <script src="js/main.js"></script>
  120. </body>
  121. </html>