-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (137 loc) · 7.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KHMZPED48H"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KHMZPED48H');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Translation Evaluator</title>
</head>
<body>
<script type="text/javascript" src="//matloomreconcile.com/d6fa14005b8ceba71017d37494822b82/invoke.js"></script>
<form id="translationForm">
<div class="dark-mode-switch">
<input type="checkbox" id="toggleDarkMode">
<label for="toggleDarkMode"></label>
</div>
<h1>Translation Evaluator</h1>
<div class="slider-container">
<h1 id="proficiencySlider" style="text-align: center;">Level</h1>
<input type="range" id="proficiencyRange" name="proficiency" min="0" max="5" step="1" value="0">
<div class="slider-labels">
<span data-value="0">A1</span>
<span data-value="1">A2</span>
<span data-value="2">B1</span>
<span data-value="3">B2</span>
<span data-value="4">C1</span>
<span data-value="5">C2</span>
</div>
</div>
<p id="warning"></p>
<div id="top">
<textarea type="text" id="originalText" placeholder="Original"></textarea>
<select name="originalLanguage" id="originalLanguage">
<option value="Arabic">Arabic</option>
<option value="Chinese (Simplified)">Chinese (Simplified)</option>
<option value="English" selected>English</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Hindi">Hindi</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Korean">Korean</option>
<option value="Portuguese">Portuguese</option>
<option value="Russian">Russian</option>
<option value="Spanish">Spanish</option>
<option value="Turkish">Turkish</option>
</select>
</div>
<div id="bot">
<textarea id="translatedText" type="text" placeholder="Translation"></textarea>
<select name="translatedLanguage" id="translatedLanguage">
<option value="Arabic">Arabic</option>
<option value="Chinese (Simplified)">Chinese (Simplified)</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Hindi">Hindi</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Korean">Korean</option>
<option value="Portuguese">Portuguese</option>
<option value="Russian">Russian</option>
<option value="Spanish">Spanish</option>
<option value="Turkish" selected>Turkish</option>
</select>
</div>
<div id="buttons">
<input type="button" id="generate" value="Generate a sentence">
<input type="button" id="evaluate" value="Evaluate the sentence">
</div>
<p id="info"></p>
</form>
<div class="below-form">
<footer>
<p style="font-size: 18px; text-align: center;">
This application is a web-based tool that allows users to perform text translations in different languages and evaluate the quality and accuracy of translations. Users can input both original and translated texts to assess the translation. Additionally, users can select their language proficiency levels.
</p>
<p style="font-size: 24px; text-align: center;">
Key Components
<ul style="font-size: 18px; color: #515151;">
<li><strong>Level:</strong> Allows users to determine their language proficiency levels.</li>
<li><strong>Language Selection:</strong> Choose one of the provided languages to perform translations.</li>
<li><strong>Text Fields:</strong> Enter original and translated text to evaluate the translation. You don't need to randomly generate original text, you can also provide text manually.</li>
<li><strong>Generate a sentence:</strong> Generates a random sentence.</li>
<li><strong>Evaluate the sentence:</strong> Evaluates the translation of the generated sentence.</li>
</ul>
</p>
<p style="font-size: 24px; text-align: center;">
Usage
<ul style="font-size: 18px; color: #515151;">
<li><strong>Select Language Proficiency Level:</strong> Use the proficiency slider to set your level. (you cannot choose the same two languages)</li>
<li><strong>Enter Text:</strong> Enter the original text and translation, select languages.</li>
<li><strong>Use Buttons:</strong> Generate a random sentence and evaluate the translation.</li>
</ul>
</p>
<p style="font-size: 18px; text-align: center;">
This application is an effective tool for language learners and translators, offering a user-friendly interface and functionalities.
</p>
<p style="font-size: 18px; text-align: center;">
Made by Faruk TUTKUS
</p>
</footer>
</div>
<script src="topics.js"></script>
<script src="index.js"></script>
<script>
document.getElementById('toggleDarkMode').addEventListener('change', function() {
document.body.classList.toggle('dark-mode', this.checked);
});
document.querySelectorAll('.slider-labels span').forEach(function(label, index) {
label.addEventListener('click', function() {
document.getElementById('proficiencyRange').value = index;
document.getElementById('proficiencyRange').dispatchEvent(new Event('input'));
});
});
document.getElementById('proficiencyRange').addEventListener('input', function() {
let value = parseInt(this.value);
document.querySelectorAll('.slider-labels span').forEach(function(label, index) {
if (index === value) {
label.style.fontWeight = 'bold';
} else {
label.style.color = '';
label.style.fontWeight = '';
}
});
});
</script>
</body>
</html>