pre2

script.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const modelViewer2 = document.getElementById('modelViewer2');
     const toggleOptions = document.querySelectorAll('input[name="toggleOption"]');
     const allSubOptionGroups = document.querySelectorAll('.sub-options');
+    const allSubOptions = document.querySelectorAll('.sub-options input[type="radio"]');
 
     function updateModels() {
         // Determine the active sub-option group
@@ -63,25 +64,29 @@ document.addEventListener('DOMContentLoaded', function() {
                 return { model1Path: 'landscape/clic02_50_ori.gltf', model2Path: 'landscape/clic02_50_sh.gltf' };
             case 'option7b':
                 return { model1Path: 'landscape/clic02_30_ori.gltf', model2Path: 'landscape/clic02_30_sh.gltf' };
-            // Add cases for other sub-options
-            default:
-                return { model1Path: 'default_model1.glb', model2Path: 'default_model2.glb' };
+
         }
     }
 
-    [option1, option2].forEach(option => {
-        option.addEventListener('change', function() {
-            // Uncheck other options
-            option1.checked = option2.checked = false;
-            this.checked = true;
-            updateModels();
+    function uncheckAllSubOptions(exceptValue) {
+        allSubOptions.forEach(option => {
+            if (option.value !== exceptValue) {
+                option.checked = false;
+            }
         });
-    });
+    }
 
     toggleOptions.forEach(option => option.addEventListener('change', () => {
         updateSubOptionsDisplay();
         updateModels();
     }));
 
+    allSubOptions.forEach(option => option.addEventListener('change', function() {
+        uncheckAllSubOptions(this.value);
+        updateModels();
+    }));
+
+    updateSubOptionsDisplay();
     updateModels();
+
 });