lesson-01.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6. max-width: 45em; margin: auto; padding: 0 1em 5em; background-color: #333333; color: #dddddd;
  7. }
  8. a, a:visited {
  9. color: lightgreen; text-decoration: none;
  10. }
  11. #result {
  12. margin: 2em 5em 2em 5em; font-weight: bold;
  13. }
  14. #logotype {
  15. text-align:center; font-size:300%;
  16. }
  17. form {
  18. display: flex; align-items: center;
  19. }
  20. #answer {
  21. flex-basis: 100%; margin: 0 1em 0 1em; font-size: 110%;
  22. }
  23. </style>
  24. <script>
  25. // First part of a question/answer
  26. let firstPart = [
  27. {"english":["I am (a/an)", "We are"],
  28. "toki":"mi"},
  29. {"english":["You are (a/an)"],
  30. "toki":"sina"},
  31. {"english":["He is (a/an)", "She is (a/an)", "They are", "It is (a/an)"],
  32. "toki":"ona li"},
  33. {"english":["A apple is (a/an)","A pear is (a/an)","Fruits are", "A tomato is (a/an)","Pineapples are","Mushrooms are","A mushroom is (a/an)","Cucumbers are","An onion is (a/an)","A banana is (a/an)"],
  34. "toki":"kili li"},
  35. {"english":["Dogs are","Animals are","A giraffe is (a/an)","A polar bear is (a/an)","Tigers are","An ape is (a/an)","A donkey is (a/an)","A horse is (a/an)","Badgers are","A rat is (a/an)"],
  36. "toki":"soweli li"}
  37. ];
  38. // Second part of a question/answer
  39. let secondPart = [
  40. {"english":["good", "simple"],
  41. "toki":"pona"},
  42. {"english":["bad","evil","unnecessary","complex"],
  43. "toki":"ike"},
  44. {"english":["big","great","important"],
  45. "toki":"suli"},
  46. {"english":["small","few","young"],
  47. "toki":"lili"},
  48. {"english":["lemon(s)","carrot(s)","potato(es)","banana(s)","grape(s)","melon(s)","pumpkin(s)"],
  49. "toki":"kili"},
  50. {"english":["animal(s)","dog(s)","elephant(s)","mammal(s)","kangaroo(s)","tiger(s)","cat(s)","cow(s)"],
  51. "toki":"soweli"}
  52. ];
  53. let correctAnswer = ""
  54. function getRandom(items) {
  55. return items[Math.floor(Math.random()*items.length)]
  56. }
  57. function askQuestion() {
  58. document.getElementById("answer").value = ""
  59. let firstP = getRandom(firstPart)
  60. let secondP = getRandom(secondPart)
  61. let sentence = getRandom(firstP.english) + " " + getRandom(secondP.english)
  62. correctAnswer = firstP.toki + " " + secondP.toki
  63. document.getElementById("sentence").innerHTML = sentence
  64. }
  65. function submitAnswer() {
  66. if (document.getElementById("answer").value == correctAnswer) {
  67. document.getElementById("result").innerHTML = "Correct!"
  68. } else {
  69. document.getElementById("result").innerHTML = "Wrong :( The correct answer is \"" + correctAnswer + "\""
  70. }
  71. askQuestion()
  72. }
  73. </script>
  74. <meta charset='utf-8'>
  75. <meta name='viewport' content='width=device-width,initial-scale=1'>
  76. <link rel='icon' href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📜</text></svg>'>
  77. <link rel='me' href='mailto:bjorn.warmedal@gmail.com' />
  78. <title>Toki Pona Lesson 1 - Björn Wärmedal</title>
  79. </head>
  80. <body onload='askQuestion()'>
  81. <p id='logotype'><a href='index.html'>📜</a></p>
  82. <h1>Lesson 1</h1>
  83. <p><a href='https://devurandom.xyz/tokipona/1.html'>These exercises are based on the first lesson at devurandom.xyz</a></p>
  84. <p>Translate "<span id='sentence'></span>"</p>
  85. <form onsubmit='submitAnswer()' autocomplete='off' action='javascript:void(0)'><label for='answer'>Translation:</label><input id='answer' type='text'></input><input type='submit' value='Answer'></input>
  86. </form>
  87. <p id='result'></p>
  88. <p>-- CC0 Björn Wärmedal, consider the code to be MIT licensed.</p>
  89. </body>
  90. </html>