- removed "Advanced" from the name

TobiasMue91 · TobiasMue91 · commit ed29d3eadb7f · 2024-08-23T13:36:47.000+02:00
- added example text in textarea
- replaced words per minute input with a slider
- changed "Reading Level" to "Text Complexity" for clarity
- implemented auto-analysis on page load
- updated UI labels and descriptions for better usability
diff --git a/tools/reading_time_estimator.html b/tools/reading_time_estimator.html
@@ -8,26 +8,32 @@
     <meta name="keywords" content="reading time, estimator, words per minute, text analysis, readability, Flesch-Kincaid">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
-    <title>Advanced Reading Time Estimator</title>
+    <title>Reading Time Estimator</title>
 </head>
 <body class="bg-gray-100 dark:bg-gray-900 flex justify-center items-center min-h-screen transition-colors duration-200">
 <div class="container mx-auto max-w-2xl p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
-    <h1 class="text-3xl font-bold text-center mb-4 text-gray-800 dark:text-white">Advanced Reading Time Estimator</h1>
+    <h1 class="text-3xl font-bold text-center mb-4 text-gray-800 dark:text-white">Reading Time Estimator</h1>
     <div class="mb-4">
         <label for="input" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Enter Text:</label>
-        <textarea id="input" class="mt-1 p-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600" rows="5" placeholder="Paste your text here..."></textarea>
+        <textarea id="input" class="mt-1 p-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600" rows="5">The Internet is a global network of interconnected computers that has revolutionized the way we communicate, access information, and conduct business. It was developed in the late 1960s as a project of the United States Department of Defense, originally called ARPANET. Today, the Internet connects billions of devices worldwide, enabling instant communication, information sharing, and a wide range of online services. Key technologies that power the Internet include TCP/IP protocols, the World Wide Web, and various applications like email, social media, and streaming platforms. As the Internet continues to evolve, it faces challenges related to privacy, security, and equal access, while also presenting new opportunities in areas such as artificial intelligence, the Internet of Things, and virtual reality.</textarea>
     </div>
     <div class="grid grid-cols-2 gap-4 mb-4">
-        <div>
-            <label for="wpm" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Words Per Minute:</label>
-            <input type="number" id="wpm" min="1" max="1000" value="200" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600">
+        <div class="mb-4">
+            <label for="readingSpeed" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Reading Speed:</label>
+            <input type="range" id="readingSpeed" min="100" max="700" step="50" value="250" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+            <div class="flex justify-between text-xs text-gray-600 dark:text-gray-400 px-2">
+                <span>Slow</span>
+                <span>Average</span>
+                <span>Fast</span>
+            </div>
+            <p id="wpmDisplay" class="text-sm text-center mt-2 text-gray-600 dark:text-gray-400">250 WPM (Average)</p>
         </div>
         <div>
-            <label for="readingLevel" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Reading Level:</label>
-            <select id="readingLevel" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600">
-                <option value="1">Beginner</option>
-                <option value="1.2">Intermediate</option>
-                <option value="1.5" selected>Advanced</option>
+            <label for="textComplexity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Text Complexity:</label>
+            <select id="textComplexity" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600">
+                <option value="1">Simple</option>
+                <option value="1.2">Moderate</option>
+                <option value="1.5">Complex</option>
             </select>
         </div>
     </div>
@@ -43,7 +49,7 @@ <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Top Keywords:
     </div>
     <div id="howToUseSection" class="my-6">
         <button onclick="toggleCollapse()" class="flex items-center justify-between w-full p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300 cursor-pointer">
-            <h2 class="font-semibold text-lg">How to Use Advanced Reading Time Estimator</h2>
+            <h2 class="font-semibold text-lg">How to Use Reading Time Estimator</h2>
             <span id="collapseIcon" class="text-xl">+</span>
         </button>
         <div id="howToUseContent" class="hidden">
@@ -64,16 +70,43 @@ <h2 class="font-semibold text-lg">How to Use Advanced Reading Time Estimator</h2
     let readabilityChart;
     document.getElementById('estimate-time').addEventListener('click', analyzeText);
 
+    window.addEventListener('load', function() {
+        updateWPMDisplay(readingSpeedSlider.value);
+        analyzeText();
+    });
+
+    const readingSpeedSlider = document.getElementById('readingSpeed');
+    const wpmDisplay = document.getElementById('wpmDisplay');
+
+    function updateWPMDisplay(value) {
+        let speedDescription;
+        if (value < 200) speedDescription = "Slow";
+        else if (value < 300) speedDescription = "Average";
+        else if (value < 450) speedDescription = "Fast";
+        else speedDescription = "Speed reader";
+
+        wpmDisplay.textContent = `${value} WPM (${speedDescription})`;
+    }
+
+    readingSpeedSlider.addEventListener('input', function() {
+        updateWPMDisplay(this.value);
+    });
+
+    readingSpeedSlider.addEventListener('change', analyzeText);
+
+    // Initial display update
+    updateWPMDisplay(readingSpeedSlider.value);
+
     function analyzeText() {
         const input = document.getElementById('input').value.trim();
         if (!input) {
             alert("Please enter some text to analyze.");
             return;
         }
-        const wpm = parseInt(document.getElementById('wpm').value) || 200;
-        const readingLevel = parseFloat(document.getElementById('readingLevel').value);
+        const wpm = parseInt(readingSpeedSlider.value);
+        const textComplexity = parseFloat(document.getElementById('textComplexity').value);
         const wordCount = input.split(/\s+/).length;
-        const readingTimeMinutes = (wordCount / wpm) * readingLevel;
+        const readingTimeMinutes = (wordCount / wpm) * textComplexity;
         const resultContainer = document.getElementById('result');
         const statsContainer = document.getElementById('stats');
         resultContainer.textContent = `Estimated Reading Time: ${formatTime(readingTimeMinutes)}`;
