Myu: 和文モールス読み取り練習　ver4 HTML5で

以前作ったHTML5によるCW練習ソフトを少し改良した。ランダム再生できるようにしてみた。

Mlearn.html　←公開しています。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Audio Beep Morse Code</title>
    <style>

#texta {
    font-size: 25px;

}
  
   /* Optional: Style the buttons */
    .surrounding-char {
      cursor: pointer;
      padding: 2px;
      margin: 0px;
      border: 1px solid #ccc;
      border-radius: 2px;
      background-color: #dcdcdc;
    }
    
 　  .surrounding-none {
 　    border: 1px solid#000;
      background-color: #000000;
    }

*, ::before, ::after { box-sizing: border-box; }
html { font-family: sans-serif; }

.wPractice {
      font-size :30px;
  }
    </style>
 
  </head>
  <body>

<h1>和文 Morse Code</h1>

<div>表示された文字をクリックして符号音を確認できます。
テキストボックス内の文字や単語は、編集可能で実行ボタンクリックで各自のＰＣに保存（クッキーとして）されます。</div>
<p>
   <input type="button" value="ランダム(66文字)" onclick="random();">　<input type="button" value="リプレイ" onclick="replay59()"><br>
   <input type="text" value="40" id="mojisu">文字<input type="button" value="ランダム" onclick="randomx()"> <input type="button" value="リプレイ" onclick="replayx()"><br>
   <input type="text" value="ヲ12ク3?ミツセヤ°" placeholder="10文字以上入力" id="tbox">からランダムに<input type ="button" value="10文字抽出" onclick="sitei()">
   　<input type="button" value="リプレイ" onclick="replay()"><br>
   <input type="text" value="テンキ　アリガトウゴザイマス　コンニチハ　デンパ　コンデイシヨン　オハヨウゴザイマス　マタヨロシクオネガイシマス" id="wbox" style="width: 400px;">
   <input type ="button" value="単語練習" onclick="word()" class="wPractice">
   <br><input type="button" value="単語練習の各文字数の確認" onclick="checkMoji()"><br>
   <span id="check"></span>
   <br>
  <label for="speed">Speed (0.4~1):</label><input type="text" id="speed" name="speed"  size="5" value="0.6"><br>
    <label for="speedControl">WPMでスピードを変更:</label>
    <input type="number" id="speedControl" min="5" max="40" value="20">
</p>

参照させていただいたサイト:<a href="https://neos21.net/blog/2021/03/30-01.html">https://neos21.net/blog/2021/03/30-01.html</a><br>
<a href="https://rasp.cld9.work/py/MLearn2.html">欧文練習</a>
  </body>

}}
  
  const rmv=()=>　{ 
       var myDiv = document.getElementById("texta");
    var lastSpan = myDiv.lastElementChild; // 最後の子要素を取得

if (lastSpan) {
      // 最後の子要素が存在する場合にのみ削除
      myDiv.removeChild(lastSpan);
    }
  }
  
  
  
  
  function insertSurroundingChar(char) {
      if(char=='＊'){
           Promise.resolve().then(cwf('＊')).then(rmv);
      }else{
           Promise.resolve().then(cwf(char)).then(rmv);
      }

}

const cwf=(moji)=> {
  　 switch (moji) {
      case 'ヘ':
         return ()=>ch1(moji,dit);
         break;
      case 'ム':
         return ()=>ch1(moji,dah);
         break;
      case 'イ':
         return ()=> ch2(moji,dit,dah);
         break;
      case 'タ':
         return () => ch2(moji,dah,dit);
         break;
      case '\"':
         return ()=>ch2(moji,dit,dit);
         break;
      case '＊':
         return ()=>ch2(moji,dit,dit);
         break;
      case 'ヨ':
         return ()=>ch2(moji,dah,dah);
         break;
      case 'ラ':
         return ()=>ch3(moji,dit,dit,dit);
         break;
      case 'ウ':
         return ()=>ch3(moji,dit,dit,dah);
         break;
      case 'ヤ':
         return ()=>ch3(moji,dit,dah,dah);
         break;
      case 'ワ':
         return ()=>ch3(moji,dah,dit,dah);
         break;
      case 'ナ':
         return ()=>ch3(moji,dit,dah,dit);
         break;
      case 'リ':
         return ()=>ch3(moji,dah,dah,dit);
         break;
      case 'レ':
         return ()=>ch3(moji,dah,dah,dah);
         break;
      case 'ホ':
         return ()=>ch3(moji,dah,dit,dit);
         break;
      case 'コ':
         return ()=>ch4(moji,dah,dah,dah,dah);
         break;
      case 'ヲ':
         return ()=>ch4(moji,dit,dah,dah,dah);
         break;
      case 'ノ':
         return ()=>ch4(moji,dit,dit,dah,dah);
         break;
      case 'ク':
         return ()=>ch4(moji,dit,dit,dit,dah);
         break;
      case 'ヌ':
         return ()=>ch4(moji,dit,dit,dit,dit);
         break;
      case 'マ':
         return ()=>ch4(moji,dah,dit,dit,dah);
         break;
      case 'ハ':
         return ()=>ch4(moji,dah,dit,dit,dit);
         break;
      case 'ネ':
         return ()=>ch4(moji,dah,dah,dit,dah);
         break;
      case 'フ':
         return ()=>ch4(moji,dah,dah,dit,dit);
         break;
      case 'ソ':
         return ()=>ch4(moji,dah,dah,dah,dit);
         break;
      case 'ケ':
         return ()=>ch4(moji,dah,dit,dah,dah);
         break;
      case 'ツ':
         return ()=>ch4(moji,dit,dah,dah,dit);
         break;
      case 'ニ':
         return ()=>ch4(moji,dah,dit,dah,dit);
         break;
      case 'ロ':
         return ()=>ch4(moji,dit,dah,dit,dah);
         break;
      case 'カ':
         return ()=>ch4(moji,dit,dah,dit,dit);
         break;
      case 'チ':
         return ()=>ch4(moji,dit,dit,dah,dit);
         break;
      case 'サ':
         return ()=>ch5(moji,dah,dit,dah,dit,dah);
         break;
      case 'シ':
         return ()=>ch5(moji,dah,dah,dit,dah,dit);
         break;
      case 'ス':
         return ()=>ch5(moji,dah,dah,dah,dit,dah);
         break;
      case 'セ':
         return ()=>ch5(moji,dit,dah,dah,dah,dit);
         break;
      case 'ル':
         return ()=>ch5(moji,dah,dit,dah,dah,dit);
         break;
      case 'ア':
         return ()=>ch5(moji,dah,dah,dit,dah,dah);
         break;
      case 'エ':
         return ()=>ch5(moji,dah,dit,dah,dah,dah);
         break;
      case 'オ':
         return ()=>ch5(moji,dit,dah,dit,dit,dit);
         break;
      case 'ヒ':
         return ()=>ch5(moji,dah,dah,dit,dit,dah);
         break;
      case 'ユ':
         return ()=>ch5(moji,dah,dit,dit,dah,dah);
         break;
      case 'キ':
         return ()=>ch5(moji,dah,dit,dah,dit,dit);
         break;
      case 'ミ':
         return ()=>ch5(moji,dit,dit,dah,dit,dah);
         break;
      case 'ン':
         return ()=>ch5(moji,dit,dah,dit,dah,dit);
         break;
      case 'テ':
         return ()=>ch5(moji,dit,dah,dit,dah,dah);
         break;
      case 'ト':
         return ()=>ch5(moji,dit,dit,dah,dit,dit);
         break;
      case 'モ':
         return ()=>ch5(moji,dah,dit,dit,dah,dit);
         break;
      case 'メ':
         return ()=>ch5(moji,dah,dit,dit,dit,dah);
         break;
      case '」':
         return ()=>ch6(moji,dit,dah,dit,dah,dit,dit);
         break;
      case '、':
         return ()=>ch6(moji,dit,dah,dit,dah,dit,dah);
         break;
      case '（':
         return ()=>ch6(moji,dah,dit,dah,dah,dit,dah);
         break;
      case '）':
         return ()=>ch6(moji,dit,dah,dit,dit,dah,dit);
         break;
      case '?':
         return ()=>ch6(moji,dit,dit,dah,dah,dit,dit);
         break;
      case '@':
         return ()=>ch6(moji,dit,dah,dah,dit,dah,dit);
         break;
      case 'ヰ':
         return ()=>ch5(moji,dit,dah,dit,dit,dah);
         break;
      case 'ヱ':
         return  ()=>ch5(moji,dit,dah,dah,dit,dit);
         break;
      case '°':
         return ()=>ch5(moji,dit,dit,dah,dah,dit);
         break;
      case 'ー':
         return ()=>ch5(moji,dit,dah,dah,dit,dah);
         break;
      case '1':
         return ()=>ch5(moji,dit,dah,dah,dah,dah);
         break;
      case '2':
         return ()=>ch5(moji,dit,dit,dah,dah,dah);
         break;
      case '3':
         return ()=>ch5(moji,dit,dit,dit,dah,dah);
         break;
      case '4':
         return ()=>ch5(moji,dit,dit,dit,dit,dah);
         break;
      case '5':
         return ()=>ch5(moji,dit,dit,dit,dit,dit);
         break;
      case '6':
         return ()=>ch5(moji,dah,dit,dit,dit,dit);
         break;
      case '7':
         return ()=>ch5(moji,dah,dah,dit,dit,dit);
         break;
      case '8':
         return ()=>ch5(moji,dah,dah,dah,dit,dit);
         break;
      case '9':
         return ()=>ch5(moji,dah,dah,dah,dah,dit);
         break;
      case '0':
         return ()=>ch5(moji,dah,dah,dah,dah,dah);
         break;
      case '　':
         return ()=>chc(" ");
         break;

};
  　}
  
    openc=()=>{ audioContext.close();   audioContext = new window.AudioContext();}

const random=() =>{
      speed = document.getElementById("speed").value;
      saveValue();
      const inputString = 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセスン?ー°1234567890」、＊（）';
      rcsx59 =insertSpaces(getRandomChars(inputString, 66),5).map(char => char.replace(/＊/g, '\"')); 
        promiseResolve(rcsx59)
 
    }
    
    const randomx=() =>{
      saveValue();
      speed = document.getElementById("speed").value;
      const mojisu = document.getElementById("mojisu").value;
      
      const inputString = 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセスン?ー°1234567890」、＊（）';
      rcsxx = getRandomChars(inputString, Number(mojisu)).map(char => char.replace(/＊/g, '\"')); 
        promiseResolve(rcsxx)
 
    }
    
  const replay59= ()=>{

speed = document.getElementById("speed").value;
           promiseResolve(rcsx59);
         }
         
  const replayx= ()=>{
      speed = document.getElementById("speed").value;
       promiseResolve(rcsxx);
         }
         
  const sitei=() =>{
   saveValue();
      speed = document.getElementById("speed").value;
        rcsx = getRandomChars(document.getElementById('tbox').value, 10).map(char => char.replace(/＊/g, '\"')); 
     promiseResolve(rcsx)
   }

const word=() =>{
    saveValue();
      speed = document.getElementById("speed").value;
        rcsx = getRandomWordsAndCharacters(document.getElementById('wbox').value).map(char => char.replace(/＊/g, '\"')); 
     promiseResolve(rcsx)
   }

function getRandomChars(inputString, count) {
  if (inputString.length < count) {
    console.error('指定された文字列に十分な文字が含まれていません。');
    return null;
  }

const rcs = [];
  const availableIndices = Array.from({ length: inputString.length }, (_, index) => index);

for (let i = 0; i < count; i++) {
    const randomIndex = Math.floor(Math.random() * availableIndices.length);
    const selectedIndex = availableIndices.splice(randomIndex, 1)[0];
    rcs.push(inputString[selectedIndex]);
  }

return rcs;
}

function decomposeDiacritics(char) {
  const diacriticMap = {
    "ガ": ["カ", "\""],
    "ギ": ["キ", "\""],
    "グ": ["ク", "\""],
    "ゲ": ["ケ", "\""],
    "ゴ": ["コ", "\""],
    "ザ": ["サ", "\""],
    "ジ": ["シ", "\""],
    "ズ": ["ス", "\""],
    "ゼ": ["セ", "\""],
    "ゾ": ["ソ", "\""],
    "ダ": ["タ", "\""],
    "ヂ": ["チ", "\""],
    "ヅ": ["ツ", "\""],
    "デ": ["テ", "\""],
    "ド": ["ト", "\""],
    "バ": ["ハ", "\""],
    "ビ": ["ヒ", "\""],
    "ブ": ["フ", "\""],
    "ベ": ["ヘ", "\""],
    "ボ": ["ホ", "\""],
    "パ": ["ハ", "°"],
    "ピ": ["ヒ", "°"],
    "プ": ["フ", "°"],
    "ペ": ["ヘ", "°"],
    "ポ": ["ホ", "°"]
  };
  
  return diacriticMap[char] || [char];
}

// ローカルストレージから値を取得してinput要素にセットする関数
 function setInitialValue() {
      const savedValue = localStorage.getItem('savedValue');
      if (savedValue !== null) {
        document.getElementById('wbox').value = savedValue;
      }

const savedMojisu= localStorage.getItem('savedMojisu');
      if (savedMojisu !== null) {
        document.getElementById('mojisu').value = savedMojisu;
      }

const savedTbox = localStorage.getItem('savedTbox');
      if (savedTbox !== null) {
        document.getElementById('tbox').value = savedTbox;
      }

const valueToMojisu = document.getElementById('mojisu').value;
      localStorage.setItem('savedMojisu', valueToMojisu);

const valueToTbox = document.getElementById('tbox').value;
      localStorage.setItem('savedTbox', valueToTbox);

const valueToSpeed = document.getElementById('speed').value;
      localStorage.setItem('savedSpeed', valueToSpeed);
    　
    　const valueToSpeedC = document.getElementById('speedControl').value;
      localStorage.setItem('savedSpeedCO', valueToSpeedC);
    }
    
    
        // WPMの変更（スピード調整用）
const updateWPM = (newWPM) => {
    wpm = newWPM;
    unitTime = 570 / wpm / 50;
    document.getElementById('speed').value=unitTime;
};

document.getElementById('speedControl').addEventListener('change', (event) => {
    const newWPM = parseInt(event.target.value, 10);
    updateWPM(newWPM);
});
    
    
    
    // ロード時に初期値をセット
    setInitialValue();

function insertSpaces(inputString, interval) {
 // const chars = inputString.split(',');
  const chars=inputString;
  const result = [];

for (let i = 0; i < chars.length; i++) {
    result.push(chars[i]);
    if ((i + 1) % interval === 0 && i !== chars.length - 1) {
      result.push('　');
    }
  }

// return result.join(',');
 return result;
}

function countJapaneseCharacters(input) {
    const japaneseCharacters = [
        'ア', 'イ', 'ウ', 'エ', 'オ',
        'カ', 'キ', 'ク', 'ケ', 'コ',
        'サ', 'シ', 'ス', 'セ', 'ソ',
        'タ', 'チ', 'ツ', 'テ', 'ト',
        'ナ', 'ニ', 'ヌ', 'ネ', 'ノ',
        'ハ', 'ヒ', 'フ', 'ヘ', 'ホ',
        'マ', 'ミ', 'ム', 'メ', 'モ',
        'ヤ', 'ユ', 'ヨ',
        'ラ', 'リ', 'ル', 'レ', 'ロ',
        'ワ', 'ヲ', 'ン'
    ];

const countMap = {};

// Initialize the countMap with all characters set to 0
    japaneseCharacters.forEach(ch => countMap[ch] = 0);

// Count characters
    for (const ch of input) {
        if (countMap.hasOwnProperty(ch)) {
            countMap[ch]++;
        }
    }

return countMap;
}

</script>

※その後、再度、ChatGPTに２～３回質問したところ、以下の修正で、文字数を動的に変えることができるようになった。

const promiseResolve = (rcs) => {

const promises = rcs.map(rc => cwf(rc));

promises.push(() => document.getElementById('texta').innerHTML += "
");

promises.reduce((chain, promise) => chain.then(() => promise()), Promise.resolve());

}

※ver3で、設定保存できるように、また、単語練習もできるようにした。

※ver4で、WPMで設定できるようにした。

Myu

2023年11月11日土曜日

和文モールス読み取り練習　ver4 HTML5で

0 件のコメント:

コメントを投稿

ブログアーカイブ

2023年11月11日土曜日

和文モールス読み取り練習 ver4 HTML5で

0 件のコメント:

コメントを投稿

和文モールス読み取り練習　ver4 HTML5で