Subham9126/voiceinteractive
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Voice Change Tool</title>7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">8 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">9 <style>10 .selected {11 background-color: #4299e1;12 color: white;13 }14 </style>15</head>16<body class="bg-gray-100 font-inter">17 <div class="container mx-auto p-6 md:p-10">18 <h1 class="text-4xl font-bold text-center mb-8">Voice Change Tool</h1>19 20 <div class="bg-white p-6 md:p-8 rounded-lg shadow-md">21 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">22 <!-- Tense Selection -->23 <div>24 <h2 class="text-lg font-medium mb-3">Tense</h2>25 <div class="flex space-x-3">26 <button data-tense="present" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Present</button>27 <button data-tense="past" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Past</button>28 <button data-tense="future" class="tense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Future</button>29 </div>30 </div>31 32 <!-- Subtense Selection -->33 <div>34 <h2 class="text-lg font-medium mb-3">Subtense</h2>35 <div class="flex flex-wrap gap-3">36 <button data-subtense="simple" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Simple</button>37 <button data-subtense="continuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Continuous</button>38 <button data-subtense="perfect" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect</button>39 <button data-subtense="perfectContinuous" class="subtense-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Perfect Continuous</button>40 </div>41 </div>42 43 <!-- Type Selection -->44 <div>45 <h2 class="text-lg font-medium mb-3">Type</h2>46 <div class="flex flex-col space-y-3">47 <button data-type="affirmative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out selected">Affirmative</button>48 <button data-type="negative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Negative</button>49 <button data-type="interrogative" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">Interrogative</button>50 <button data-type="whWord" class="type-btn bg-gray-200 hover:bg-gray-300 font-medium py-2 px-4 rounded-lg transition-colors duration-300 ease-in-out">WH-word</button>51 </div>52 </div>53 </div>54 55 <div class="rule mb-6" id="rule-text">56 <h2 id="active-voice-heading" class="text-2xl font-bold mb-3 text-red-500">Active Voice:</h2>57 <h3 id="active-voice-text" class="text-lg font-medium mb-3">sub+ v2+ obj</h3>58 <h2 id="passive-voice-heading" class="text-2xl font-bold mb-3 text-blue-500">Passive Voice:</h2>59 <h3 id="passive-voice-text" class="text-lg font-medium mb-3">obj+ was/were+ v3+ by+ sub</h3>60 </div>61 62 <div class="examples mb-8" id="examples-text">63 <h2 class="text-2xl font-bold mb-3 text-green-500">Examples:</h2>64 <div id="examples-list">65 <h2><strong>Active voice:</strong> I wrote a letter.<br><strong>Passive voice:</strong> A letter was written by me.</h2>66 <h2><strong>Active voice:</strong> She played the guitar.<br><strong>Passive voice:</strong> The guitar was played by her.</h2>67 </div>68 </div>69 70 <div class="flex justify-center">71 <button id="prev-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-l">72 Previous73 </button>74 <button id="next-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-r">75 Next76 </button>77 </div>78 </div>79 </div>80 81 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>82 <script>83 const voiceChangeRules = {84 present: {85 simple: {86 affirmative: {87 active: 'sub+ v1+ obj',88 passive: 'obj+ am/is/are+ v3+ by+ sub',89 examples: [90 { active: 'I write a letter.', passive: 'A letter is written by me.' },91 { active: 'She plays the guitar.', passive: 'The guitar is played by her.' }92 ]93 },94 negative: {95 active: 'sub+ do/does not+ v1+ obj',96 passive: 'obj+ is/are+ not+ v3+ by+ sub',97 examples: [98 { active: 'I do not write a letter.', passive: 'A letter is not written by me.' },99 { active: 'She does not play the guitar.', passive: 'The guitar is not played by her.' }100 ]101 },102 interrogative: {103 active: 'do/does+ sub+ v1+ obj?',104 passive: 'is/are+ obj+ v3+ by+ sub?',105 examples: [106 { active: 'Do I write a letter?', passive: 'Is a letter written by me?' },107 { active: 'Does she play the guitar?', passive: 'Is the guitar played by her?' }108 ]109 },110 whWord: {111 active: 'wh-word+ do/does+ sub+ v1+ obj?',112 passive: 'wh-word+ is/are+ obj+ v3+ by+ sub?',113 examples: [114 { active: 'Why do I write a letter?', passive: 'Why is a letter written by me?' },115 { active: 'What does she play?', passive: 'What is played by her?' }116 ]117 }118 },119 continuous: {120 affirmative: {121 active: 'sub+ am/is/are+ v1+ing+ obj',122 passive: 'obj+ am/is/are+ being+ v3+ by+ sub',123 examples: [124 { active: 'I am writing a letter.', passive: 'A letter is being written by me.' },125 { active: 'She is playing the guitar.', passive: 'The guitar is being played by her.' }126 ]127 },128 negative: {129 active: 'sub+ am/is/are not+ v1+ing+ obj',130 passive: 'obj+ am/is/are not+ being+ v3+ by+ sub',131 examples: [132 { active: 'I am not writing a letter.', passive: 'A letter is not being written by me.' },133 { active: 'She is not playing the guitar.', passive: 'The guitar is not being played by her.' }134 ]135 },136 interrogative: {137 active: 'am/is/are+ sub+ v1+ing+ obj?',138 passive: 'am/is/are+ obj+ being+ v3+ by+ sub?',139 examples: [140 { active: 'Am I writing a letter?', passive: 'Is a letter being written by me?' },141 { active: 'Is she playing the guitar?', passive: 'Is the guitar being played by her?' }142 ]143 },144 whWord: {145 active: 'wh-word+ am/is/are+ sub+ v1+ing+ obj?',146 passive: 'wh-word+ am/is/are+ obj+ being+ v3+ by+ sub?',147 examples: [148 { active: 'What are you writing?', passive: 'What is being written by you?' },149 { active: 'Why is she playing the guitar?', passive: 'Why is the guitar being played by her?' }150 ]151 }152 },153 perfect: {154 affirmative: {155 active: 'sub+ have/has+ v3+ obj',156 passive: 'obj+ have/has+ been+ v3+ by+ sub',157 examples: [158 { active: 'I have written a letter.', passive: 'A letter has been written by me.' },159 { active: 'She has played the guitar.', passive: 'The guitar has been played by her.' }160 ]161 },162 negative: {163 active: 'sub+ have/has not+ v3+ obj',164 passive: 'obj+ have/has not+ been+ v3+ by+ sub',165 examples: [166 { active: 'I have not written a letter.', passive: 'A letter has not been written by me.' },167 { active: 'She has not played the guitar.', passive: 'The guitar has not been played by her.' }168 ]169 },170 interrogative: {171 active: 'have/has+ sub+ v3+ obj?',172 passive: 'have/has+ obj+ been+ v3+ by+ sub?',173 examples: [174 { active: 'Have I written a letter?', passive: 'Has a letter been written by me?' },175 { active: 'Has she played the guitar?', passive: 'Has the guitar been played by her?' }176 ]177 },178 whWord: {179 active: 'wh-word+ have/has+ sub+ v3+ obj?',180 passive: 'wh-word+ have/has+ obj+ been+ v3+ by+ sub?',181 examples: [182 { active: 'What have you written?', passive: 'What has been written by you?' },183 { active: 'Why has she played the guitar?', passive: 'Why has the guitar been played by her?' }184 ]185 }186 }187 },188 past: {189 simple: {190 affirmative: {191 active: 'sub+ v2+ obj',192 passive: 'obj+ was/were+ v3+ by+ sub',193 examples: [194 { active: 'I wrote a letter.', passive: 'A letter was written by me.' },195 { active: 'She played the guitar.', passive: 'The guitar was played by her.' }196 ]197 },198 negative: {199 active: 'sub+ did not+ v1+ obj',200 passive: 'obj+ was/were+ not+ v3+ by+ sub',201 examples: [202 { active: 'I did not write a letter.', passive: 'A letter was not written by me.' },203 { active: 'She did not play the guitar.', passive: 'The guitar was not played by her.' }204 ]205 },206 interrogative: {207 active: 'did+ sub+ v1+ obj?',208 passive: 'was/were+ obj+ v3+ by+ sub?',209 examples: [210 { active: 'Did I write a letter?', passive: 'Was a letter written by me?' },211 { active: 'Did she play the guitar?', passive: 'Was the guitar played by her?' }212 ]213 },214 whWord: {215 active: 'wh-word+ did+ sub+ v1+ obj?',216 passive: 'wh-word+ was/were+ obj+ v3+ by+ sub?',217 examples: [218 { active: 'Why did I write a letter?', passive: 'Why was a letter written by me?' },219 { active: 'What did she play?', passive: 'What was played by her?' }220 ]221 }222 },223 continuous: {224 affirmative: {225 active: 'sub+ was/were+ v1+ing+ obj',226 passive: 'obj+ was/were+ being+ v3+ by+ sub',227 examples: [228 { active: 'I was writing a letter.', passive: 'A letter was being written by me.' },229 { active: 'She was playing the guitar.', passive: 'The guitar was being played by her.' }230 ]231 },232 negative: {233 active: 'sub+ was/were not+ v1+ing+ obj',234 passive: 'obj+ was/were not+ being+ v3+ by+ sub',235 examples: [236 { active: 'I was not writing a letter.', passive: 'A letter was not being written by me.' },237 { active: 'She was not playing the guitar.', passive: 'The guitar was not being played by her.' }238 ]239 },240 interrogative: {241 active: 'was/were+ sub+ v1+ing+ obj?',242 passive: 'was/were+ obj+ being+ v3+ by+ sub?',243 examples: [244 { active: 'Was I writing a letter?', passive: 'Was a letter being written by me?' },245 { active: 'Was she playing the guitar?', passive: 'Was the guitar being played by her?' }246 ]247 },248 whWord: {249 active: 'wh-word+ was/were+ sub+ v1+ing+ obj?',250 passive: 'wh-word+ was/were+ obj+ being+ v3+ by+ sub?',251 examples: [252 { active: 'What was I writing?', passive: 'What was being written by me?' },253 { active: 'Why was she playing the guitar?', passive: 'Why was the guitar being played by her?' }254 ]255 }256 },257 perfect: {258 affirmative: {259 active: 'sub+ had+ v3+ obj',260 passive: 'obj+ had+ been+ v3+ by+ sub',261 examples: [262 { active: 'I had written a letter.', passive: 'A letter had been written by me.' },263 { active: 'She had played the guitar.', passive: 'The guitar had been played by her.' }264 ]265 },266 negative: {267 active: 'sub+ had not+ v3+ obj',268 passive: 'obj+ had not+ been+ v3+ by+ sub',269 examples: [270 { active: 'I had not written a letter.', passive: 'A letter had not been written by me.' },271 { active: 'She had not played the guitar.', passive: 'The guitar had not been played by her.' }272 ]273 },274 interrogative: {275 active: 'had+ sub+ v3+ obj?',276 passive: 'had+ obj+ been+ v3+ by+ sub?',277 examples: [278 { active: 'Had I written a letter?', passive: 'Had a letter been written by me?' },279 { active: 'Had she played the guitar?', passive: 'Had the guitar been played by her?' }280 ]281 },282 whWord: {283 active: 'wh-word+ had+ sub+ v3+ obj?',284 passive: 'wh-word+ had+ obj+ been+ v3+ by+ sub?',285 examples: [286 { active: 'What had you written?', passive: 'What had been written by you?' },287 { active: 'Why had she played the guitar?', passive: 'Why had the guitar been played by her?' }288 ]289 }290 }291 },292 future: {293 simple: {294 affirmative: {295 active: 'sub+ will+ v1+ obj',296 passive: 'obj+ will+ be+ v3+ by+ sub',297 examples: [298 { active: 'I will write a letter.', passive: 'A letter will be written by me.' },299 { active: 'She will play the guitar.', passive: 'The guitar will be played by her.' }300 ]301 },302 negative: {303 active: 'sub+ will not+ v1+ obj',304 passive: 'obj+ will not+ be+ v3+ by+ sub',305 examples: [306 { active: 'I will not write a letter.', passive: 'A letter will not be written by me.' },307 { active: 'She will not play the guitar.', passive: 'The guitar will not be played by her.' }308 ]309 },310 interrogative: {311 active: 'will+ sub+ v1+ obj?',312 passive: 'will+ obj+ be+ v3+ by+ sub?',313 examples: [314 { active: 'Will I write a letter?', passive: 'Will a letter be written by me?' },315 { active: 'Will she play the guitar?', passive: 'Will the guitar be played by her?' }316 ]317 },318 whWord: {319 active: 'wh-word+ will+ sub+ v1+ obj?',320 passive: 'wh-word+ will+ obj+ be+ v3+ by+ sub?',321 examples: [322 { active: 'What will I write?', passive: 'What will be written by me?' },323 { active: 'Why will she play the guitar?', passive: 'Why will the guitar be played by her?' }324 ]325 }326 },327 continuous: {328 affirmative: {329 active: 'sub+ will be+ v1+ing+ obj',330 passive: 'obj+ will be+ being+ v3+ by+ sub',331 examples: [332 { active: 'I will be writing a letter.', passive: 'A letter will be being written by me.' },333 { active: 'She will be playing the guitar.', passive: 'The guitar will be being played by her.' }334 ]335 },336 negative: {337 active: 'sub+ will not be+ v1+ing+ obj',338 passive: 'obj+ will not be+ being+ v3+ by+ sub',339 examples: [340 { active: 'I will not be writing a letter.', passive: 'A letter will not be being written by me.' },341 { active: 'She will not be playing the guitar.', passive: 'The guitar will not be being played by her.' }342 ]343 },344 interrogative: {345 active: 'will+ sub+ be+ v1+ing+ obj?',346 passive: 'will+ obj+ be+ being+ v3+ by+ sub?',347 examples: [348 { active: 'Will I be writing a letter?', passive: 'Will a letter be being written by me?' },349 { active: 'Will she be playing the guitar?', passive: 'Will the guitar be being played by her?' }350 ]351 },352 whWord: {353 active: 'wh-word+ will+ sub+ be+ v1+ing+ obj?',354 passive: 'wh-word+ will+ obj+ be+ being+ v3+ by+ sub?',355 examples: [356 { active: 'What will I be writing?', passive: 'What will be being written by me?' },357 { active: 'Why will she be playing the guitar?', passive: 'Why will the guitar be being played by her?' }358 ]359 }360 },361 perfect: {362 affirmative: {363 active: 'sub+ will have+ v3+ obj',364 passive: 'obj+ will have+ been+ v3+ by+ sub',365 examples: [366 { active: 'I will have written a letter.', passive: 'A letter will have been written by me.' },367 { active: 'She will have played the guitar.', passive: 'The guitar will have been played by her.' }368 ]369 },370 negative: {371 active: 'sub+ will not have+ v3+ obj',372 passive: 'obj+ will not have+ been+ v3+ by+ sub',373 examples: [374 { active: 'I will not have written a letter.', passive: 'A letter will not have been written by me.' },375 { active: 'She will not have played the guitar.', passive: 'The guitar will not have been played by her.' }376 ]377 },378 interrogative: {379 active: 'will+ sub+ have+ v3+ obj?',380 passive: 'will+ obj+ have+ been+ v3+ by+ sub?',381 examples: [382 { active: 'Will I have written a letter?', passive: 'Will a letter have been written by me?' },383 { active: 'Will she have played the guitar?', passive: 'Will the guitar have been played by her?' }384 ]385 },386 whWord: {387 active: 'wh-word+ will+ sub+ have+ v3+ obj?',388 passive: 'wh-word+ will+ obj+ have+ been+ v3+ by+ sub?',389 examples: [390 { active: 'What will you have written?', passive: 'What will have been written by you?' },391 { active: 'Why will she have played the guitar?', passive: 'Why will the guitar have been played by her?' }392 ]393 }394 }395 }396};397 398 399 // Handle button state and display rules and examples400 const tenseButtons = document.querySelectorAll('.tense-btn');401 const subtenseButtons = document.querySelectorAll('.subtense-btn');402 const typeButtons = document.querySelectorAll('.type-btn');403 let selectedTense = null;404 let selectedSubtense = null;405 let selectedType = null;406 407 function updateContent() {408 if (selectedTense && selectedSubtense && selectedType) {409 const rule = voiceChangeRules[selectedTense][selectedSubtense][selectedType];410 document.getElementById('active-voice-heading').textContent = 'Active Voice:';411 document.getElementById('active-voice-text').textContent = rule.active;412 document.getElementById('passive-voice-heading').textContent = 'Passive Voice:';413 document.getElementById('passive-voice-text').textContent = rule.passive;414 415 const examples = rule.examples.map(ex => 416 `<p><strong>Active voice:</strong> ${ex.active}<br><strong>Passive voice:</strong> ${ex.passive}</p>`417 ).join('');418 document.getElementById('examples-list').innerHTML = examples;419 }420 }421 422 tenseButtons.forEach(button => {423 button.addEventListener('click', () => {424 tenseButtons.forEach(btn => btn.classList.remove('selected'));425 button.classList.add('selected');426 selectedTense = button.dataset.tense;427 updateContent();428 });429 });430 431 subtenseButtons.forEach(button => {432 button.addEventListener('click', () => {433 subtenseButtons.forEach(btn => btn.classList.remove('selected'));434 button.classList.add('selected');435 selectedSubtense = button.dataset.subtense;436 updateContent();437 });438 });439 440 typeButtons.forEach(button => {441 button.addEventListener('click', () => {442 typeButtons.forEach(btn => btn.classList.remove('selected'));443 button.classList.add('selected');444 selectedType = button.dataset.type;445 updateContent();446 });447 });448 </script>449</body>450</html>