{"id":255,"date":"2026-04-25T15:38:17","date_gmt":"2026-04-25T12:38:17","guid":{"rendered":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/?page_id=255"},"modified":"2026-08-31T16:04:04","modified_gmt":"2026-08-31T13:04:04","slug":"c-duurin-savelet-1-3","status":"publish","type":"page","link":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/c-duurin-savelet-1-3\/","title":{"rendered":"C-duurin s\u00e4velet 1-3"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"1024\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png\" alt=\"\" class=\"wp-image-151\" style=\"width:60px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png 889w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-260x300.png 260w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-768x884.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2.png 1200w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h1 class=\"wp-block-heading has-text-align-center\">Laula tai vihell\u00e4 melodia<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"875\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png\" alt=\"\" class=\"wp-image-153\" style=\"width:100px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png 1024w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-300x256.png 300w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-768x656.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1536x1312.png 1536w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-2048x1750.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"955\" height=\"1024\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-955x1024.png\" alt=\"\" class=\"wp-image-259\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-955x1024.png 955w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-280x300.png 280w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-768x823.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-1433x1536.png 1433w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1-1911x2048.png 1911w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Duuri-1-3-1.png 1920w\" sizes=\"auto, (max-width: 955px) 100vw, 955px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"1024\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png\" alt=\"\" class=\"wp-image-151\" style=\"width:60px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png 889w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-260x300.png 260w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-768x884.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2.png 1200w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h1 class=\"wp-block-heading has-text-align-center\">Kuunteluteht\u00e4v\u00e4: Kirjoita melodia numeroin<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"875\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png\" alt=\"\" class=\"wp-image-153\" style=\"width:100px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png 1024w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-300x256.png 300w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-768x656.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1536x1312.png 1536w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-2048x1750.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n    <div id=\"melodia-app\" data-mode=\"major\">\n\n              <div id=\"melodia-login-prompt\">\n          Kirjaudu sis\u00e4\u00e4n, jotta n\u00e4et etenemisesi.\n          <a href=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-login.php?redirect_to=https%3A%2F%2Fpopjazzplus.fi%2Fmuhaportaali%2Ftasot-1-4%2Fc-duurin-savelet-1-3%2F\" class=\"melodia-login-btn\">Kirjaudu sis\u00e4\u00e4n<\/a>\n        <\/div>\n      \n      <div id=\"melodia-progress-summary\"><\/div>\n\n      <!-- Teht\u00e4v\u00e4napit -->\n      <div id=\"taskButtons\" style=\"margin:10px 0;\"><\/div>\n\n      <!-- Nuottinapit -->\n      <div class=\"note-buttons\" style=\"margin-top:10px;\">\n                  <button\n            class=\"note-btn\"\n            data-note=\"C\"\n            onclick=\"melodia_addNote('C', this)\"\n          >1<\/button>\n                  <button\n            class=\"note-btn\"\n            data-note=\"D\"\n            onclick=\"melodia_addNote('D', this)\"\n          >2<\/button>\n                  <button\n            class=\"note-btn\"\n            data-note=\"E\"\n            onclick=\"melodia_addNote('E', this)\"\n          >3<\/button>\n                  <button\n            class=\"note-btn\"\n            data-note=\"F\"\n            onclick=\"melodia_addNote('F', this)\"\n          >4<\/button>\n                  <button\n            class=\"note-btn\"\n            data-note=\"G\"\n            onclick=\"melodia_addNote('G', this)\"\n          >5<\/button>\n        \n        <button onclick=\"melodia_deleteSelected()\">Poista valittu<\/button>\n        <button onclick=\"melodia_insertBefore()\">Lis\u00e4\u00e4 ennen<\/button>\n        <button onclick=\"melodia_insertAfter()\">Lis\u00e4\u00e4 j\u00e4lkeen<\/button>\n        <button onclick=\"melodia_removeLast()\">Poista viimeinen<\/button>\n        <button onclick=\"melodia_resetNotes()\">Resetoi<\/button>\n        <button onclick=\"melodia_checkAnswer()\">Vastaa<\/button>\n      <\/div>\n\n      <!-- Soitin -->\n      <div id=\"player-controls\" style=\"margin-top:12px;\">\n        <button id=\"playBtn\"  onclick=\"melodia_playAudio()\">\u25b6<\/button>\n        <button id=\"pauseBtn\" onclick=\"melodia_pauseAudio()\">\u23f8<\/button>\n        <button id=\"stopBtn\"  onclick=\"melodia_stopAudio()\">\u25a0<\/button>\n        <input type=\"range\" id=\"progress\" value=\"0\" min=\"0\" max=\"100\" step=\"0.1\">\n      <\/div>\n\n      <!-- Piirto, status, t\u00e4hdet -->\n      <div id=\"paperUser\"><\/div>\n      <div id=\"status\">Valitse teht\u00e4v\u00e4 ja aloita.<\/div>\n      <div id=\"stars\">\u2606\u2606\u2606\u2606\u2606<\/div>\n\n      <audio id=\"audioPlayer\" style=\"display:none\"><\/audio>\n    <\/div>\n    \n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"1024\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png\" alt=\"\" class=\"wp-image-151\" style=\"width:60px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-889x1024.png 889w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-260x300.png 260w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2-768x884.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Tehtavalogo-2.png 1200w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:70%\">\n<h1 class=\"wp-block-heading has-text-align-center\">Melodian kuunteluautomaatti<\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:15%\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"875\" src=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png\" alt=\"\" class=\"wp-image-153\" style=\"width:100px\" srcset=\"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1024x875.png 1024w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-300x256.png 300w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-768x656.png 768w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-1536x1312.png 1536w, https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-content\/uploads\/sites\/3\/2026\/04\/Pollo-1-2048x1750.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n    <div id=\"melodiaA-app\" data-mode=\"major\" data-range=\"3\">\n\n      <div id=\"melodiaA-key-label\"><\/div>\n\n      <div id=\"melodiaA-player-controls\">\n        <button type=\"button\" onclick=\"melodiaA_playAudio()\">\u25b6<\/button>\n        <button type=\"button\" onclick=\"melodiaA_stopAudio()\">\u25a0<\/button>\n      <\/div>\n\n      <div id=\"melodiaA-task-controls\">\n        <button type=\"button\" id=\"melodiaA-newTaskBtn\" onclick=\"melodiaA_newTask()\">Uusi teht\u00e4v\u00e4<\/button>\n      <\/div>\n\n      <div id=\"melodiaA-paperUser\"><\/div>\n\n      <div id=\"melodiaA-note-buttons\"><\/div>\n\n      <div id=\"melodiaA-action-buttons\">\n        <button type=\"button\" onclick=\"melodiaA_deleteSelected()\">Poista valittu<\/button>\n        <button type=\"button\" onclick=\"melodiaA_insertBefore()\">Lis\u00e4\u00e4 ennen<\/button>\n        <button type=\"button\" onclick=\"melodiaA_insertAfter()\">Lis\u00e4\u00e4 j\u00e4lkeen<\/button>\n        <button type=\"button\" onclick=\"melodiaA_removeLast()\">Poista viimeinen<\/button>\n        <button type=\"button\" onclick=\"melodiaA_resetNotes()\">Tyhjenn\u00e4<\/button>\n        <button type=\"button\" onclick=\"melodiaA_checkAnswer()\">Vastaa<\/button>\n      <\/div>\n\n      <div id=\"melodiaA-status\"><\/div>\n      <div id=\"melodiaA-session-summary\"><\/div>\n      <div id=\"melodiaA-stars\">\u2606\u2606\u2606\u2606\u2606<\/div>\n    <\/div>\n    \n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<p><!DOCTYPE html><br \/>\n<html lang=\"en\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n<title>1 2 3 &#8211; solfapeli<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&#038;family=Work+Sans:wght@400;500&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root {<br \/>\n    --bg: #1c1a17;<br \/>\n    --bg-panel: #24211d;<br \/>\n    --cream: #f4efe6;<br \/>\n    --cream-dim: #b9b2a5;<br \/>\n    --c-note: #e2a23b;<br \/>\n    --d-note: #5aa8a0;<br \/>\n    --e-note: #c1707a;<br \/>\n    --line: rgba(244, 239, 230, 0.14);<br \/>\n  }<\/p>\n<p>  * { box-sizing: border-box; }<\/p>\n<p>  html, body {<br \/>\n    margin: 0;<br \/>\n    height: 100%;<br \/>\n  }<\/p>\n<p>  body {<br \/>\n    background: var(--bg);<br \/>\n    background-image:<br \/>\n      radial-gradient(ellipse at 20% -10%, rgba(226, 162, 59, 0.06), transparent 55%),<br \/>\n      radial-gradient(ellipse at 85% 110%, rgba(90, 168, 160, 0.06), transparent 55%);<br \/>\n    color: var(--cream);<br \/>\n    font-family: 'Work Sans', sans-serif;<br \/>\n    display: flex;<br \/>\n    align-items: center;<br \/>\n    justify-content: center;<br \/>\n    min-height: 100vh;<br \/>\n    padding: 24px;<br \/>\n  }<\/p>\n<p>  .stage {<br \/>\n    width: 100%;<br \/>\n    max-width: 460px;<br \/>\n    text-align: center;<br \/>\n  }<\/p>\n<p>  h1 {<br \/>\n    font-family: 'Fraunces', serif;<br \/>\n    font-weight: 600;<br \/>\n    font-size: clamp(2.2rem, 8vw, 3rem);<br \/>\n    letter-spacing: -0.01em;<br \/>\n    margin: 0 0 4px;<br \/>\n  }<\/p>\n<p>  .subtitle {<br \/>\n    color: var(--cream-dim);<br \/>\n    font-size: 0.95rem;<br \/>\n    margin: 0 0 40px;<br \/>\n  }<\/p>\n<p>  .keys {<br \/>\n    display: flex;<br \/>\n    justify-content: center;<br \/>\n    gap: 14px;<br \/>\n    margin-bottom: 34px;<br \/>\n  }<\/p>\n<p>  .key {<br \/>\n    position: relative;<br \/>\n    width: 84px;<br \/>\n    height: 168px;<br \/>\n    border-radius: 10px 10px 16px 16px;<br \/>\n    border: none;<br \/>\n    cursor: pointer;<br \/>\n    display: flex;<br \/>\n    align-items: flex-end;<br \/>\n    justify-content: center;<br \/>\n    padding-bottom: 16px;<br \/>\n    font-family: 'Fraunces', serif;<br \/>\n    font-size: 1.15rem;<br \/>\n    color: rgba(28, 26, 23, 0.65);<br \/>\n    transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;<br \/>\n    filter: brightness(0.82) saturate(0.85);<br \/>\n    box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.35);<br \/>\n  }<\/p>\n<p>  .key[data-note=\"C\"] { background: var(--c-note); }<br \/>\n  .key[data-note=\"D\"] { background: var(--d-note); }<br \/>\n  .key[data-note=\"E\"] { background: var(--e-note); }<\/p>\n<p>  .key:active {<br \/>\n    transform: translateY(4px);<br \/>\n    box-shadow: 0 2px 0 rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.3);<br \/>\n  }<\/p>\n<p>  .key.lit {<br \/>\n    filter: brightness(1.15) saturate(1.1);<br \/>\n    box-shadow: 0 6px 0 rgba(0,0,0,0.35), 0 0 28px 4px currentColor, 0 8px 18px rgba(0,0,0,0.35);<br \/>\n    transform: translateY(-3px);<br \/>\n  }<\/p>\n<p>  .key[data-note=\"C\"].lit { color: var(--c-note); }<br \/>\n  .key[data-note=\"D\"].lit { color: var(--d-note); }<br \/>\n  .key[data-note=\"E\"].lit { color: var(--e-note); }<\/p>\n<p>  .key:disabled { cursor: default; }<\/p>\n<p>  .key:focus-visible {<br \/>\n    outline: 2px solid var(--cream);<br \/>\n    outline-offset: 3px;<br \/>\n  }<\/p>\n<p>  .stats {<br \/>\n    display: flex;<br \/>\n    justify-content: center;<br \/>\n    gap: 32px;<br \/>\n    padding: 14px 0;<br \/>\n    border-top: 1px solid var(--line);<br \/>\n    border-bottom: 1px solid var(--line);<br \/>\n    margin-bottom: 26px;<br \/>\n  }<\/p>\n<p>  .stat .num {<br \/>\n    font-family: 'Fraunces', serif;<br \/>\n    font-size: 1.6rem;<br \/>\n    display: block;<br \/>\n  }<\/p>\n<p>  .stat .label {<br \/>\n    font-size: 0.78rem;<br \/>\n    color: var(--cream-dim);<br \/>\n  }<\/p>\n<p>  .status {<br \/>\n    min-height: 24px;<br \/>\n    color: var(--cream-dim);<br \/>\n    font-size: 0.95rem;<br \/>\n    margin-bottom: 22px;<br \/>\n    letter-spacing: 0.01em;<br \/>\n  }<\/p>\n<p>  .status.error { color: var(--e-note); }<\/p>\n<p>  button.action {<br \/>\n    font-family: 'Work Sans', sans-serif;<br \/>\n    font-weight: 500;<br \/>\n    font-size: 0.95rem;<br \/>\n    background: var(--cream);<br \/>\n    color: #1c1a17;<br \/>\n    border: none;<br \/>\n    border-radius: 999px;<br \/>\n    padding: 13px 34px;<br \/>\n    cursor: pointer;<br \/>\n    transition: opacity 0.15s ease;<br \/>\n  }<\/p>\n<p>  button.action:hover { opacity: 0.88; }<\/p>\n<p>  button.action:focus-visible {<br \/>\n    outline: 2px solid var(--cream);<br \/>\n    outline-offset: 3px;<br \/>\n  }<\/p>\n<p>  .hint {<br \/>\n    margin-top: 18px;<br \/>\n    font-size: 0.8rem;<br \/>\n    color: var(--cream-dim);<br \/>\n  }<\/p>\n<p>  .mode-toggle {<br \/>\n    display: inline-flex;<br \/>\n    align-items: center;<br \/>\n    gap: 8px;<br \/>\n    background: transparent;<br \/>\n    border: 1px solid var(--line);<br \/>\n    color: var(--cream-dim);<br \/>\n    font-family: 'Work Sans', sans-serif;<br \/>\n    font-size: 0.78rem;<br \/>\n    border-radius: 999px;<br \/>\n    padding: 7px 16px;<br \/>\n    cursor: pointer;<br \/>\n    margin-bottom: 28px;<br \/>\n    transition: border-color 0.15s ease, color 0.15s ease;<br \/>\n  }<\/p>\n<p>  .mode-toggle:hover {<br \/>\n    border-color: var(--cream-dim);<br \/>\n    color: var(--cream);<br \/>\n  }<\/p>\n<p>  .mode-toggle:focus-visible {<br \/>\n    outline: 2px solid var(--cream);<br \/>\n    outline-offset: 3px;<br \/>\n  }<\/p>\n<p>  .mode-toggle .dot {<br \/>\n    width: 6px;<br \/>\n    height: 6px;<br \/>\n    border-radius: 50%;<br \/>\n    background: var(--cream-dim);<br \/>\n  }<\/p>\n<p>  .mode-toggle[data-hard=\"true\"] .dot {<br \/>\n    background: var(--e-note);<br \/>\n  }<\/p>\n<p>  @media (prefers-reduced-motion: reduce) {<br \/>\n    .key, button.action { transition: none; }<br \/>\n  }<br \/>\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><main class=\"stage\"><\/p>\n<h1>1 2 3 &#8211; solfapeli<\/h1>\n<p class=\"subtitle\">Kuuntele \u00e4\u00e4ni\u00e4 ja toista ne.<\/p>\n<p>  <button class=\"mode-toggle\" id=\"modeToggle\" data-hard=\"false\" aria-pressed=\"false\"><br \/>\n    <span class=\"dot\"><\/span><br \/>\n    <span id=\"modeLabel\">Helppo &#8211; \u00e4\u00e4net v\u00e4l\u00e4ht\u00e4\u00e4<\/span><br \/>\n  <\/button><\/p>\n<div class=\"keys\">\n    <button class=\"key\" data-note=\"C\" data-index=\"0\" aria-label=\"C note\">C<\/button><br \/>\n    <button class=\"key\" data-note=\"D\" data-index=\"1\" aria-label=\"D note\">D<\/button><br \/>\n    <button class=\"key\" data-note=\"E\" data-index=\"2\" aria-label=\"E note\">E<\/button>\n  <\/div>\n<div class=\"stats\">\n<div class=\"stat\">\n      <span class=\"num\" id=\"score\">0<\/span><br \/>\n      <span class=\"label\">pisteet<\/span>\n    <\/div>\n<div class=\"stat\">\n      <span class=\"num\" id=\"round\">\u2013<\/span><br \/>\n      <span class=\"label\">taso<\/span>\n    <\/div>\n<\/p><\/div>\n<p class=\"status\" id=\"status\" aria-live=\"polite\">\n<p>  <button class=\"action\" id=\"mainButton\">Aloita<\/button><\/p>\n<p class=\"hint\">\n<p><\/main><\/p>\n<p><script><br \/>\n(function () {<br \/>\n  const NOTES = { C: 261.63, D: 293.66, E: 329.63 };<br \/>\n  const keys = Array.from(document.querySelectorAll('.key'));<br \/>\n  const scoreEl = document.getElementById('score');<br \/>\n  const roundEl = document.getElementById('round');<br \/>\n  const statusEl = document.getElementById('status');<br \/>\n  const mainButton = document.getElementById('mainButton');<br \/>\n  const modeToggle = document.getElementById('modeToggle');<br \/>\n  const modeLabel = document.getElementById('modeLabel');<\/p>\n<p>  const PLAYBACK_DURATION = 0.96; \/\/ tripled from 0.32s<br \/>\n  const PRESS_DURATION = 0.66; \/\/ tripled from 0.22s<\/p>\n<p>  let audioCtx = null;<br \/>\n  let sequence = [];<br \/>\n  let playerStep = 0;<br \/>\n  let score = 0;<br \/>\n  let acceptingInput = false;<br \/>\n  let hardMode = false;<br \/>\n  let playbackGap = 1050; \/\/ ms between notes, shrinks each round<br \/>\n  const START_GAP = 1050;<br \/>\n  const MIN_GAP = 480;<br \/>\n  const GAP_STEP = 40;<\/p>\n<p>  function getAudioCtx() {<br \/>\n    if (!audioCtx) {<br \/>\n      audioCtx = new (window.AudioContext || window.webkitAudioContext)();<br \/>\n    }<br \/>\n    return audioCtx;<br \/>\n  }<\/p>\n<p>  function playTone(note, duration = PLAYBACK_DURATION) {<br \/>\n    const ctx = getAudioCtx();<br \/>\n    const osc = ctx.createOscillator();<br \/>\n    const gain = ctx.createGain();<br \/>\n    osc.type = 'sine';<br \/>\n    osc.frequency.value = NOTES[note];<\/p>\n<p>    const now = ctx.currentTime;<br \/>\n    gain.gain.setValueAtTime(0, now);<br \/>\n    gain.gain.linearRampToValueAtTime(0.64, now + 0.02);<br \/>\n    gain.gain.exponentialRampToValueAtTime(0.001, now + duration);<\/p>\n<p>    osc.connect(gain).connect(ctx.destination);<br \/>\n    osc.start(now);<br \/>\n    osc.stop(now + duration + 0.05);<br \/>\n  }<\/p>\n<p>  function litKey(index, on) {<br \/>\n    keys[index].classList.toggle('lit', on);<br \/>\n  }<\/p>\n<p>  function setStatus(text, isError) {<br \/>\n    statusEl.textContent = text;<br \/>\n    statusEl.classList.toggle('error', !!isError);<br \/>\n  }<\/p>\n<p>  function sleep(ms) {<br \/>\n    return new Promise((resolve) => setTimeout(resolve, ms));<br \/>\n  }<\/p>\n<p>  async function playSequence() {<br \/>\n    acceptingInput = false;<br \/>\n    setStatus('Kuuntele\u2026');<br \/>\n    await sleep(400);<br \/>\n    const toneMs = PLAYBACK_DURATION * 1000;<br \/>\n    for (let i = 0; i < sequence.length; i++) {\n      const idx = sequence[i];\n      if (!hardMode) litKey(idx, true);\n      playTone(keys[idx].dataset.note);\n      const holdTime = Math.min(playbackGap, toneMs);\n      await sleep(holdTime);\n      if (!hardMode) litKey(idx, false);\n      await sleep(Math.max(playbackGap - holdTime, 90));\n    }\n    playerStep = 0;\n    acceptingInput = true;\n    setStatus('Sinun vuorosi.');\n  }\n\n  function nextRound() {\n    sequence.push(Math.floor(Math.random() * 3));\n    roundEl.textContent = sequence.length;\n    if (sequence.length > 1) {<br \/>\n      playbackGap = Math.max(MIN_GAP, playbackGap - GAP_STEP);<br \/>\n    }<br \/>\n    playSequence();<br \/>\n  }<\/p>\n<p>  function handleKeyPress(index) {<br \/>\n    if (!acceptingInput) return;<\/p>\n<p>    litKey(index, true);<br \/>\n    playTone(keys[index].dataset.note, PRESS_DURATION);<br \/>\n    setTimeout(() => litKey(index, false), 260);<\/p>\n<p>    if (sequence[playerStep] === index) {<br \/>\n      playerStep++;<br \/>\n      score++;<br \/>\n      scoreEl.textContent = score;<br \/>\n      if (playerStep === sequence.length) {<br \/>\n        acceptingInput = false;<br \/>\n        setStatus('Oikein. Seuraava kierros\u2026');<br \/>\n        setTimeout(nextRound, 700);<br \/>\n      }<br \/>\n    } else {<br \/>\n      endGame();<br \/>\n    }<br \/>\n  }<\/p>\n<p>  function endGame() {<br \/>\n    acceptingInput = false;<br \/>\n    setStatus(`Wrong note. Final score: ${score}`, true);<br \/>\n    mainButton.textContent = 'Play again';<br \/>\n  }<\/p>\n<p>  function startGame() {<br \/>\n    score = 0;<br \/>\n    sequence = [];<br \/>\n    playbackGap = START_GAP;<br \/>\n    scoreEl.textContent = '0';<br \/>\n    roundEl.textContent = '\u2013';<br \/>\n    mainButton.textContent = 'Da Capo';<br \/>\n    nextRound();<br \/>\n  }<\/p>\n<p>  keys.forEach((key) => {<br \/>\n    key.addEventListener('click', () => handleKeyPress(Number(key.dataset.index)));<br \/>\n  });<\/p>\n<p>  mainButton.addEventListener('click', startGame);<\/p>\n<p>  modeToggle.addEventListener('click', () => {<br \/>\n    hardMode = !hardMode;<br \/>\n    modeToggle.dataset.hard = String(hardMode);<br \/>\n    modeToggle.setAttribute('aria-pressed', String(hardMode));<br \/>\n    modeLabel.textContent = hardMode<br \/>\n      ? 'Vaikea - pelkk\u00e4 \u00e4\u00e4ni'<br \/>\n      : 'Helppo - \u00e4\u00e4net v\u00e4l\u00e4ht\u00e4\u00e4';<br \/>\n  });<\/p>\n<p>  document.addEventListener('keydown', (e) => {<br \/>\n    const map = { 'a': 0, 's': 1, 'd': 2, '1': 0, '2': 1, '3': 2 };<br \/>\n    if (map[e.key.toLowerCase()] !== undefined) {<br \/>\n      handleKeyPress(map[e.key.toLowerCase()]);<br \/>\n    }<br \/>\n  });<br \/>\n})();<br \/>\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>","protected":false},"excerpt":{"rendered":"<p>Laula tai vihell\u00e4 melodia Kuunteluteht\u00e4v\u00e4: Kirjoita melodia numeroin Melodian kuunteluautomaatti 1 2 3 &#8211; solfapeli 1 2 3 &#8211; solfapeli [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-255","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/pages\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":14,"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/pages\/255\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/pages\/255\/revisions\/486"}],"wp:attachment":[{"href":"https:\/\/popjazzplus.fi\/muhaportaali\/tasot-1-4\/wp-json\/wp\/v2\/media?parent=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}