言語学習ソーシャルプラットフォーム
外国語学習者同士がコミュニケーションをとれるプラットフォームです。
言語交換
母語としたい言語を入力してください：
学びたい言語を入力してください：
会話パートナー
言語を選択してください：
フィードバック
文章を入力してください：
以下が実装例です。JavaScriptでevalを使う危険性があるため、evalは使わずに実装しています。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>言語学習ソーシャルプラットフォーム</title>
</head>
<body>
<h1>言語学習ソーシャルプラットフォーム</h1>
<p>外国語学習者同士がコミュニケーションをとれるプラットフォームです。</p>
<h2>言語交換</h2>
<p>母語としたい言語を入力してください：</p>
<input type="text" id="myLang">
<p>学びたい言語を入力してください：</p>
<input type="text" id="learnLang">
<button onclick="findPartner()">パートナーを探す</button>
<h2>会話パートナー</h2>
<p>言語を選択してください：</p>
<select id="partnerLang">
<option value="英語">英語</option>
<option value="スペイン語">スペイン語</option>
<option value="中国語">中国語</option>
</select>
<button onclick="findConversationPartner()">パートナーを探す</button>
<h2>フィードバック</h2>
<p>文章を入力してください：</p>
<textarea id="text"></textarea>
<button onclick="provideFeedback()">フィードバックを送る</button>
<script>
function findPartner() {
const myLang = document.querySelector('#myLang').value;
const learnLang = document.querySelector('#learnLang').value;
alert(`パートナーを探しました！\nあなたが母語としたい言語: ${myLang}\nあなたが学びたい言語: ${learnLang}`);
}
function findConversationPartner() {
const partnerLang = document.querySelector('#partnerLang').value;
alert(`会話パートナーを探しました！\nあなたの選択した言語: ${partnerLang}`);
}
function provideFeedback() {
const text = document.querySelector('#text').value;
alert(`フィードバックを送りました！\n送信内容: ${text}\nありがとうございます！`);
}
</script>
</body>
</html>
```
ジョークとしては、言語を選択するセレクトボックスの中に「エルフ語」や「オーク語」といったファンタジーの言語を追加すると、ユーザーが驚くかもしれません。ただし、セキュリティに問題がある場合は実装しないでください。