fork download
copy 
  1.  
  2. The user wants me to create a web application based on the detailed specification provided. The app should:
  3.  
  4. - Include a landing homepage accessible via QR code (the QR code itself can be generated later; I will make the main page available)
  5. - Display a welcome message and instructions
  6. - Provide a form for personal information input (name, age, gender, and possibly others)
  7. - Include an ergonomic assessment using ROSA (using the existing ergonomic assessment form we created)
  8. - Show recommendations based on ROSA scores and personal info
  9. - Allow saving or displaying a summary of assessments.
  10.  
  11. I will create a single HTML file with:
  12.  
  13. - A landing homepage with welcome/instruction section
  14. - A personal info form
  15. - The ROSA ergonomic assessment form (from previous version with images)
  16. - After assessment, show recommendations and summary
  17. - Simple JS navigation between sections/pages
  18. - Save data in localStorage for session persistence (client-side only)
  19. - All inline CSS and JavaScript; no backend
  20. - Add instructions/manual section as per requirements
  21.  
  22. I will now create this full single-page ergonomic assessment web app with the required features.
  23.  
  24.  
  25.  
  26. `rosa_ergonomic_assessment_app.html`
  27. ```html
  28. <!DOCTYPE html>
  29. <html lang="th">
  30. <head>
  31.   <meta charset="UTF-8" />
  32.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  33.   <title>โปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</title>
  34.   <style>
  35.     body {
  36.       font-family: "Kanit", Arial, sans-serif;
  37.       margin: 20px;
  38.       background-color: #f5f7fa;
  39.       color: #333;
  40.     }
  41.     h1, h2 {
  42.       color: #005a9c;
  43.       text-align: center;
  44.     }
  45.     h3 {
  46.       color: #004477;
  47.     }
  48.     .container {
  49.       max-width: 700px;
  50.       margin: 0 auto;
  51.       background: white;
  52.       padding: 20px 25px;
  53.       border-radius: 8px;
  54.       box-shadow: 0 0 12px rgba(0,0,0,0.12);
  55.     }
  56.     .hidden {
  57.       display: none;
  58.     }
  59.     label {
  60.       display: block;
  61.       margin: 12px 0 6px;
  62.       font-weight: 600;
  63.     }
  64.     input[type="text"], input[type="number"], select {
  65.       width: 100%;
  66.       padding: 8px 10px;
  67.       border-radius: 4px;
  68.       border: 1px solid #ccc;
  69.       box-sizing: border-box;
  70.       font-size: 1rem;
  71.     }
  72.     input[type="radio"], input[type="checkbox"] {
  73.       margin-right: 8px;
  74.       vertical-align: middle;
  75.     }
  76.     .inline-label {
  77.       display: inline-block;
  78.       margin-right: 20px;
  79.     }
  80.     button {
  81.       background-color: #005a9c;
  82.       color: white;
  83.       border: none;
  84.       padding: 12px 25px;
  85.       border-radius: 4px;
  86.       font-size: 16px;
  87.       cursor: pointer;
  88.       margin: 20px 0;
  89.       display: block;
  90.       width: 100%;
  91.     }
  92.     button:hover {
  93.       background-color: #004077;
  94.     }
  95.     nav {
  96.       text-align: center;
  97.       margin-bottom: 10px;
  98.     }
  99.     nav button {
  100.       margin: 0 5px;
  101.       width: auto;
  102.       padding: 8px 18px;
  103.       font-size: 14px;
  104.     }
  105.     .section-image {
  106.       max-width: 120px;
  107.       float: right;
  108.       margin-left: 12px;
  109.       border: 1px solid #ccc;
  110.       border-radius: 6px;
  111.       background: #fff;
  112.       padding: 5px;
  113.       box-shadow: 0 0 5px rgba(0,0,0,0.1);
  114.     }
  115.     fieldset {
  116.       border: 1px solid #ddd;
  117.       margin-bottom: 25px;
  118.       padding: 15px 15px 25px 15px;
  119.       border-radius: 6px;
  120.       position: relative;
  121.       overflow: auto;
  122.       clear: both;
  123.     }
  124.     legend {
  125.       font-weight: bold;
  126.       padding: 0 10px;
  127.       color: #005a9c;
  128.     }
  129.     .summary {
  130.       background: #e0f0ff;
  131.       padding: 15px;
  132.       border-radius: 6px;
  133.       border: 1px solid #005a9c;
  134.       margin-top: 20px;
  135.       white-space: pre-line;
  136.     }
  137.     .footer-text {
  138.       font-size: 0.9rem;
  139.       color: #666;
  140.       text-align: center;
  141.       margin-top: 35px;
  142.     }
  143.   </style>
  144. </head>
  145. <body>
  146.   <div class="container">
  147.  
  148.     <!-- Navigation -->
  149.     <nav>
  150.       <button type="button" id="navHome">หน้าแรก</button>
  151.       <button type="button" id="navPersonal">ข้อมูลส่วนตัว</button>
  152.       <button type="button" id="navAssessment">ประเมิน ROSA</button>
  153.       <button type="button" id="navManual">คู่มือการใช้งาน</button>
  154.     </nav>
  155.  
  156.     <!-- Home / Welcome Section -->
  157.     <section id="sectionHome">
  158.       <h1>ยินดีต้อนรับสู่โปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</h1>
  159.       <p>
  160.         โปรแกรมนี้ช่วยให้คุณประเมินท่าทางการทำงานและความเสี่ยงทางด้านการยศาสตร์ได้อย่างง่ายดาย เพียงกรอกข้อมูลส่วนตัวและทำแบบประเมินท่าทาง แล้วรับคำแนะนำเพื่อปรับปรุงท่าทางการทำงานให้เหมาะสม
  161.       </p>
  162.       <p><strong>คำแนะนำเบื้องต้น:</strong></p>
  163.       <ul>
  164.         <li>กรอกข้อมูลส่วนตัวให้ครบถ้วนเพื่อการประเมินที่แม่นยำ</li>
  165.         <li>ทำแบบประเมินท่าทางตามคำแนะนำในหน้าประเมิน</li>
  166.         <li>อ่านคำแนะนำหลังการประเมินเพื่อปรับปรุงท่าทางการทำงาน</li>
  167.       </ul>
  168.       <p>คุณสามารถใช้เมนูด้านบนเพื่อเข้าใช้งานส่วนต่าง ๆ ของโปรแกรมได้</p>
  169.     </section>
  170.  
  171.     <!-- Personal Information Section -->
  172.     <section id="sectionPersonal" class="hidden">
  173.       <h2>กรอกข้อมูลส่วนตัว</h2>
  174.       <form id="personalForm">
  175.         <label for="name">ชื่อ-นามสกุล</label>
  176.         <input type="text" id="name" name="name" placeholder="กรอกชื่อของคุณ" required />
  177.  
  178.         <label for="age">อายุ</label>
  179.         <input type="number" id="age" name="age" min="10" max="100" placeholder="กรอกอายุ (ปี)" required />
  180.  
  181.         <label>เพศ</label>
  182.         <div>
  183.           <label class="inline-label"><input type="radio" name="gender" value="ชาย" required /> ชาย</label>
  184.           <label class="inline-label"><input type="radio" name="gender" value="หญิง" /> หญิง</label>
  185.           <label class="inline-label"><input type="radio" name="gender" value="อื่นๆ" /> อื่นๆ</label>
  186.         </div>
  187.  
  188.         <label for="job">อาชีพ (ถ้ามี)</label>
  189.         <input type="text" id="job" name="job" placeholder="例: พนักงานออฟฟิศ, นักศึกษา" />
  190.  
  191.         <label for="additionalInfo">ข้อมูลเพิ่มเติม (ถ้ามี)</label>
  192.         <input type="text" id="additionalInfo" name="additionalInfo" placeholder="กรอกข้อมูลเพิ่มเติม เช่น ปัญหาสุขภาพ" />
  193.  
  194.         <button type="submit">บันทึกข้อมูลส่วนตัว</button>
  195.       </form>
  196.     </section>
  197.  
  198.     <!-- ROSA Assessment Section -->
  199.     <section id="sectionAssessment" class="hidden">
  200.       <h2>แบบประเมินท่าทางการยศาสตร์ (ROSA)</h2>
  201.       <form id="rosaForm">
  202.         <fieldset class="chair">
  203.           <legend>การประเมินเก้าอี้ (Chair Assessment)</legend>
  204.           <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/c/cb/Office_chair_icon.svg/120px-Office_chair_icon.svg.png" alt="Chair" class="section-image" />
  205.           <label for="seatHeight">ความสูงของที่นั่ง</label>
  206.           <select id="seatHeight" name="seatHeight" required>
  207.             <option value="">-- เลือก --</option>
  208.             <option value="ต่ำ (ต่ำกว่า 40cm)">ต่ำ (ต่ำกว่า 40cm)</option>
  209.             <option value="ปานกลาง (40-50 cm)">ปานกลาง (40-50 cm)</option>
  210.             <option value="สูง (สูงกว่า 50 cm)">สูง (สูงกว่า 50 cm)</option>
  211.           </select>
  212.  
  213.           <label>มีพนักพิงหลังหรือไม่</label>
  214.           <div class="inline-label">
  215.             <input type="radio" id="backSupportYes" name="backSupport" value="มี" required />
  216.             <label for="backSupportYes">มี</label>
  217.           </div>
  218.           <div class="inline-label">
  219.             <input type="radio" id="backSupportNo" name="backSupport" value="ไม่มี" />
  220.             <label for="backSupportNo">ไม่มี</label>
  221.           </div>
  222.  
  223.           <label>มีที่วางแขนหรือไม่</label>
  224.           <div class="inline-label">
  225.             <input type="radio" id="armrestsYes" name="armrests" value="มี" required />
  226.             <label for="armrestsYes">มี</label>
  227.           </div>
  228.           <div class="inline-label">
  229.             <input type="radio" id="armrestsNo" name="armrests" value="ไม่มี" />
  230.             <label for="armrestsNo">ไม่มี</label>
  231.           </div>
  232.         </fieldset>
  233.  
  234.         <fieldset class="monitor">
  235.           <legend>การประเมินจอภาพและโต๊ะทำงาน (Monitor and Desk)</legend>
  236.           <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/d/df/Desktop_monitor_icon.svg/120px-Desktop_monitor_icon.svg.png" alt="Monitor and Desk" class="section-image" />
  237.           <label for="monitorHeight">ระดับความสูงของจอภาพ</label>
  238.           <select id="monitorHeight" name="monitorHeight" required>
  239.             <option value="">-- เลือก --</option>
  240.             <option value="ต่ำกว่าระดับสายตา">ต่ำกว่าระดับสายตา</option>
  241.             <option value="ระดับสายตา">ระดับสายตา</option>
  242.             <option value="สูงกว่าระดับสายตา">สูงกว่าระดับสายตา</option>
  243.           </select>
  244.  
  245.           <label for="monitorDistance">ระยะห่างของจอภาพจากตา</label>
  246.           <select id="monitorDistance" name="monitorDistance" required>
  247.             <option value="">-- เลือก --</option>
  248.             <option value="ใกล้เกินไป (&lt; 40 cm)">ใกล้เกินไป (&lt; 40 cm)</option>
  249.             <option value="เหมาะสม (40-75 cm)">เหมาะสม (40-75 cm)</option>
  250.             <option value="ห่างเกินไป (&gt; 75 cm)">ห่างเกินไป (&gt; 75 cm)</option>
  251.           </select>
  252.  
  253.           <label for="deskHeight">ความสูงของโต๊ะทำงาน</label>
  254.           <select id="deskHeight" name="deskHeight" required>
  255.             <option value="">-- เลือก --</option>
  256.             <option value="ต่ำ (ต่ำกว่า 68 cm)">ต่ำ (ต่ำกว่า 68 cm)</option>
  257.             <option value="เหมาะสม (68-75 cm)">เหมาะสม (68-75 cm)</option>
  258.             <option value="สูง (สูงกว่า 75 cm)">สูง (สูงกว่า 75 cm)</option>
  259.           </select>
  260.         </fieldset>
  261.  
  262.         <fieldset class="keyboard">
  263.           <legend>การประเมินคีย์บอร์ดและเมาส์ (Keyboard and Mouse)</legend>
  264.           <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/3/3b/Computer_keyboard_font_awesome.svg/120px-Computer_keyboard_font_awesome.svg.png" alt="Keyboard and Mouse" class="section-image" />
  265.           <label>ตำแหน่งคีย์บอร์ด</label>
  266.           <div class="inline-label">
  267.             <input type="radio" id="keyboardFlat" name="keyboardPosition" value="แบนราบ" required />
  268.             <label for="keyboardFlat">แบนราบ</label>
  269.           </div>
  270.           <div class="inline-label">
  271.             <input type="radio" id="keyboardTilted" name="keyboardPosition" value="เอียง" />
  272.             <label for="keyboardTilted">เอียง</label>
  273.           </div>
  274.  
  275.           <label>การใช้เมาส์</label>
  276.           <div class="inline-label">
  277.             <input type="radio" id="mouseLow" name="mouseUse" value="ใช้น้อย" required />
  278.             <label for="mouseLow">ใช้น้อย</label>
  279.           </div>
  280.           <div class="inline-label">
  281.             <input type="radio" id="mouseMedium" name="mouseUse" value="ใช้ปานกลาง" />
  282.             <label for="mouseMedium">ใช้ปานกลาง</label>
  283.           </div>
  284.           <div class="inline-label">
  285.             <input type="radio" id="mouseHigh" name="mouseUse" value="ใช้มาก" />
  286.             <label for="mouseHigh">ใช้มาก</label>
  287.           </div>
  288.         </fieldset>
  289.  
  290.         <fieldset class="posture">
  291.           <legend>ท่าทางร่างกาย (Body Posture)</legend>
  292.           <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/1/12/Ergonomic_seated_posture.svg/120px-Ergonomic_seated_posture.svg.png" alt="Body Posture" class="section-image" />
  293.           <label for="neckAngle">มุมของคอ</label>
  294.           <select id="neckAngle" name="neckAngle" required>
  295.             <option value="">-- เลือก --</option>
  296.             <option value="เป็นกลาง (0-10°)">เป็นกลาง (0-10°)</option>
  297.             <option value="ปานกลาง (11-20°)">ปานกลาง (11-20°)</option>
  298.             <option value="มาก (21° ขึ้นไป)">มาก (21° ขึ้นไป)</option>
  299.           </select>
  300.  
  301.           <label for="backAngle">มุมของหลัง</label>
  302.           <select id="backAngle" name="backAngle" required>
  303.             <option value="">-- เลือก --</option>
  304.             <option value="ตรง (75° - 90°)">ตรง (75° - 90°)</option>
  305.             <option value="โน้มไปข้างหน้า (45° - 75°)">โน้มไปข้างหน้า (45° - 75°)</option>
  306.             <option value="กดหลัง (ต่ำกว่า 45°)">กดหลัง (ต่ำกว่า 45°)</option>
  307.           </select>
  308.  
  309.           <label for="armPosition">ตำแหน่งแขน</label>
  310.           <select id="armPosition" name="armPosition" required>
  311.             <option value="">-- เลือก --</option>
  312.             <option value="ชิดลำตัว">ชิดลำตัว</option>
  313.             <option value="ยื่นไปข้างหน้า">ยื่นไปข้างหน้า</option>
  314.             <option value="ยกขึ้นเหนือโต๊ะ">ยกขึ้นเหนือโต๊ะ</option>
  315.           </select>
  316.         </fieldset>
  317.  
  318.         <button type="submit">ประเมินผล</button>
  319.       </form>
  320.       <div id="assessmentSummary" class="summary hidden"></div>
  321.     </section>
  322.  
  323.     <!-- User Manual Section -->
  324.     <section id="sectionManual" class="hidden">
  325.       <h2>คู่มือการใช้งาน</h2>
  326.       <p>ในหน้านี้คุณจะพบคำอธิบายขั้นตอนการใช้งานโปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</p>
  327.       <ul>
  328.         <li><strong>กรอกข้อมูลส่วนตัว:</strong> ให้กรอกข้อมูลพื้นฐาน เช่น ชื่อ อายุ เพศ และข้อมูลอื่นๆ เพื่อใช้ในการประเมินความเสี่ยง</li>
  329.         <li><strong>แบบประเมิน ROSA:</strong> ทำแบบประเมินตามคำแนะนำ เช่น ตำแหน่งเก้าอี้ ระดับจอภาพ และท่าทางร่างกาย</li>
  330.         <li><strong>การดูผลลัพธ์:</strong> หลังจากส่งแบบประเมิน โปรแกรมจะแสดงผลการประเมินและคำแนะนำด้านการปรับปรุงท่าทาง</li>
  331.         <li><strong>ความปลอดภัยข้อมูล:</strong> ข้อมูลของคุณจะถูกเก็บเป็นความลับและไม่ถูกเปิดเผยต่อบุคคลภายนอก</li>
  332.       </ul>
  333.       <p>หากมีคำถามเพิ่มเติม สามารถติดต่อเจ้าหน้าที่หรือผู้ดูแลระบบเพื่อขอความช่วยเหลือได้</p>
  334.     </section>
  335.  
  336.     <div class="footer-text">
  337.       &copy; 2024 โปรแกรมประเมินท่าทางการยศาสตร์ ROSA
  338.     </div>
  339.   </div>
  340.  
  341.   <script>
  342.     // Navigation buttons
  343.     const navHome = document.getElementById('navHome');
  344.     const navPersonal = document.getElementById('navPersonal');
  345.     const navAssessment = document.getElementById('navAssessment');
  346.     const navManual = document.getElementById('navManual');
  347.  
  348.     // Sections
  349.     const sectionHome = document.getElementById('sectionHome');
  350.     const sectionPersonal = document.getElementById('sectionPersonal');
  351.     const sectionAssessment = document.getElementById('sectionAssessment');
  352.     const sectionManual = document.getElementById('sectionManual');
  353.  
  354.     function showSection(section) {
  355.       // Hide all
  356.       sectionHome.classList.add('hidden');
  357.       sectionPersonal.classList.add('hidden');
  358.       sectionAssessment.classList.add('hidden');
  359.       sectionManual.classList.add('hidden');
  360.       // Show chosen
  361.       section.classList.remove('hidden');
  362.       window.scrollTo(0,0);
  363.     }
  364.  
  365.     navHome.addEventListener('click', () => showSection(sectionHome));
  366.     navPersonal.addEventListener('click', () => showSection(sectionPersonal));
  367.     navAssessment.addEventListener('click', () => {
  368.       // Only allow access if personal info saved
  369.       if (!localStorage.getItem('personalInfo')) {
  370.         alert('กรุณากรอกและบันทึกข้อมูลส่วนตัวก่อนทำแบบประเมินท่าทาง');
  371.         showSection(sectionPersonal);
  372.         return;
  373.       }
  374.       showSection(sectionAssessment);
  375.     });
  376.     navManual.addEventListener('click', () => showSection(sectionManual));
  377.  
  378.     // Personal info form submit
  379.     const personalForm = document.getElementById('personalForm');
  380.     personalForm.addEventListener('submit', function(event) {
  381.       event.preventDefault();
  382.  
  383.       const data = {
  384.         name: personalForm.name.value.trim(),
  385.         age: personalForm.age.value,
  386.         gender: personalForm.gender.value,
  387.         job: personalForm.job.value.trim(),
  388.         additionalInfo: personalForm.additionalInfo.value.trim()
  389.       };
  390.  
  391.       // Simple validation (already required in inputs)
  392.       localStorage.setItem('personalInfo', JSON.stringify(data));
  393.       alert('บันทึกข้อมูลส่วนตัวเรียบร้อยแล้ว');
  394.       showSection(sectionAssessment);
  395.     });
  396.  
  397.     // Restore personal info if available
  398.     window.addEventListener('load', () => {
  399.       let saved = localStorage.getItem('personalInfo');
  400.       if (saved) {
  401.         let data = JSON.parse(saved);
  402.         personalForm.name.value = data.name || '';
  403.         personalForm.age.value = data.age || '';
  404.         let genderElems = personalForm.gender;
  405.         for(let i=0; i<genderElems.length; i++) {
  406.           if(genderElems[i].value === data.gender){
  407.             genderElems[i].checked = true;
  408.           }
  409.         }
  410.         personalForm.job.value = data.job || '';
  411.         personalForm.additionalInfo.value = data.additionalInfo || '';
  412.       }
  413.       showSection(sectionHome);
  414.     });
  415.  
  416.     // ROSA form handling
  417.     const rosaForm = document.getElementById('rosaForm');
  418.     const summaryDiv = document.getElementById('assessmentSummary');
  419.  
  420.     rosaForm.addEventListener('submit', function(event) {
  421.       event.preventDefault();
  422.  
  423.       const form = event.target;
  424.  
  425.       // Collect ROSA data
  426.       const data = {
  427.         'ความสูงของที่นั่ง': form.seatHeight.value,
  428.         'พนักพิงหลัง': form.backSupport.value,
  429.         'ที่วางแขน': form.armrests.value,
  430.         'ระดับความสูงของจอภาพ': form.monitorHeight.value,
  431.         'ระยะห่างของจอภาพจากตา': form.monitorDistance.value,
  432.         'ความสูงของโต๊ะทำงาน': form.deskHeight.value,
  433.         'ตำแหน่งคีย์บอร์ด': form.keyboardPosition.value,
  434.         'การใช้เมาส์': form.mouseUse.value,
  435.         'มุมของคอ': form.neckAngle.value,
  436.         'มุมของหลัง': form.backAngle.value,
  437.         'ตำแหน่งแขน': form.armPosition.value,
  438.       };
  439.  
  440.       // Simple ROSA risk score estimation for demo purposes
  441.       // Assign numeric scores to options for a rough risk score
  442.       function scoreOption(value, mapping) {
  443.         return mapping[value] || 0;
  444.       }
  445.  
  446.       const scoreMap = {
  447.         seatHeight: {
  448.           "ต่ำ (ต่ำกว่า 40cm)": 2,
  449.           "ปานกลาง (40-50 cm)": 1,
  450.           "สูง (สูงกว่า 50 cm)": 3,
  451.         },
  452.         backSupport: {
  453.           "มี": 0,
  454.           "ไม่มี": 3,
  455.         },
  456.         armrests: {
  457.           "มี": 0,
  458.           "ไม่มี": 2,
  459.         },
  460.         monitorHeight: {
  461.           "ต่ำกว่าระดับสายตา": 2,
  462.           "ระดับสายตา": 0,
  463.           "สูงกว่าระดับสายตา": 2,
  464.         },
  465.         monitorDistance: {
  466.           "ใกล้เกินไป (< 40 cm)": 3,
  467.           "ใกล้เกินไป (&lt; 40 cm)":3,
  468.           "เหมาะสม (40-75 cm)": 0,
  469.           "ห่างเกินไป (> 75 cm)": 2,
  470.           "ห่างเกินไป (&gt; 75 cm)": 2,
  471.           "ใกล้เกินไป (&lt; 40 cm)":3,
  472.         },
  473.         deskHeight: {
  474.           "ต่ำ (ต่ำกว่า 68 cm)": 2,
  475.           "เหมาะสม (68-75 cm)": 0,
  476.           "สูง (สูงกว่า 75 cm)": 2,
  477.         },
  478.         keyboardPosition: {
  479.           "แบนราบ": 0,
  480.           "เอียง": 2,
  481.         },
  482.         mouseUse: {
  483.           "ใช้น้อย": 0,
  484.           "ใช้ปานกลาง": 1,
  485.           "ใช้มาก": 3,
  486.         },
  487.         neckAngle: {
  488.           "เป็นกลาง (0-10°)": 0,
  489.           "ปานกลาง (11-20°)": 2,
  490.           "มาก (21° ขึ้นไป)": 4,
  491.         },
  492.         backAngle: {
  493.           "ตรง (75° - 90°)": 0,
  494.           "โน้มไปข้างหน้า (45° - 75°)": 3,
  495.           "กดหลัง (ต่ำกว่า 45°)": 5,
  496.         },
  497.         armPosition: {
  498.           "ชิดลำตัว": 0,
  499.           "ยื่นไปข้างหน้า": 2,
  500.           "ยกขึ้นเหนือโต๊ะ": 3,
  501.         }
  502.       };
  503.  
  504.       let totalScore = 0;
  505.       for (const key in data) {
  506.         // Map keys to scoreMap keys (some keys same but some differ, handle carefully)
  507.         let mapKey = "";
  508.         switch(key) {
  509.           case 'ความสูงของที่นั่ง': mapKey = 'seatHeight'; break;
  510.           case 'พนักพิงหลัง': mapKey = 'backSupport'; break;
  511.           case 'ที่วางแขน': mapKey = 'armrests'; break;
  512.           case 'ระดับความสูงของจอภาพ': mapKey = 'monitorHeight'; break;
  513.           case 'ระยะห่างของจอภาพจากตา': mapKey = 'monitorDistance'; break;
  514.           case 'ความสูงของโต๊ะทำงาน': mapKey = 'deskHeight'; break;
  515.           case 'ตำแหน่งคีย์บอร์ด': mapKey = 'keyboardPosition'; break;
  516.           case 'การใช้เมาส์': mapKey = 'mouseUse'; break;
  517.           case 'มุมของคอ': mapKey = 'neckAngle'; break;
  518.           case 'มุมของหลัง': mapKey = 'backAngle'; break;
  519.           case 'ตำแหน่งแขน': mapKey = 'armPosition'; break;
  520.         }
  521.         totalScore += scoreOption(data[key], scoreMap[mapKey]);
  522.       }
  523.  
  524.       // Risk level based on totalScore
  525.       let riskLevel = "";
  526.       let recommendations = "";
  527.       if (totalScore <= 5) {
  528.         riskLevel = "ระดับความเสี่ยงต่ำ";
  529.         recommendations = "ท่าทางของคุณอยู่ในเกณฑ์ปลอดภัย แนะนำให้รักษาสภาพการทำงานเดิมไว้และพักผ่อนเมื่อรู้สึกเมื่อยล้า";
  530.       } else if (totalScore <= 12) {
  531.         riskLevel = "ระดับความเสี่ยงปานกลาง";
  532.         recommendations = "แนะนำให้ปรับเปลี่ยนท่าทางบางส่วน เช่น การปรับความสูงของเก้าอี้และจอภาพ รวมถึงพักเบรกบ่อยขึ้น";
  533.       } else {
  534.         riskLevel = "ระดับความเสี่ยงสูง";
  535.         recommendations = "ควรปรับปรุงท่าทางอย่างเร่งด่วน โดยปรึกษาผู้เชี่ยวชาญด้านการยศาสตร์และปรับอุปกรณ์ทำงานให้เหมาะสม";
  536.       }
  537.  
  538.       // Show personal info summary
  539.       let personalInfo = localStorage.getItem('personalInfo');
  540.       personalInfo = personalInfo ? JSON.parse(personalInfo) : null;
  541.  
  542.       let summaryText = "ผลสรุปการประเมินท่าทางการยศาสตร์ด้วย ROSA\n\n";
  543.       if(personalInfo){
  544.         summaryText += `ชื่อ: ${personalInfo.name}\n`;
  545.         summaryText += `อายุ: ${personalInfo.age}\n`;
  546.         summaryText += `เพศ: ${personalInfo.gender}\n`;
  547.         if(personalInfo.job) summaryText += `อาชีพ: ${personalInfo.job}\n`;
  548.         if(personalInfo.additionalInfo) summaryText += `ข้อมูลเพิ่มเติม: ${personalInfo.additionalInfo}\n`;
  549.       }
  550.  
  551.       summaryText += "\nข้อมูลแบบประเมิน:\n";
  552.       for (const key in data) {
  553.         summaryText += `- ${key}: ${data[key]}\n`;
  554.       }
  555.  
  556.       summaryText += `\nคะแนนรวมความเสี่ยง: ${totalScore}\n`;
  557.       summaryText += `ระดับความเสี่ยง: ${riskLevel}\n\n`;
  558.       summaryText += `คำแนะนำ:\n${recommendations}\n\n`;
  559.  
  560.       // Additional recommendations for musculoskeletal health
  561.       summaryText += "คำแนะนำเพิ่มเติมสำหรับความผิดปกติของโครงร่างกล้ามเนื้อ:\n";
  562.       summaryText += "- นั่งหลังตรง และใช้พนักพิงหลังให้เหมาะสม\n";
  563.       summaryText += "- ปรับความสูงโต๊ะและเก้าอี้ให้พอดีกับระดับศีรษะและข้อศอก\n";
  564.       summaryText += "- ใช้เมาส์และคีย์บอร์ดในตำแหน่งที่สบายและลดการยกไหล่\n";
  565.       summaryText += "- พักสายตาทุก 20 นาที โดยการมองไปไกลประมาณ 20 ฟุต เป็นเวลา 20 วินาที\n";
  566.       summaryText += "- ยืดเหยียดกล้ามเนื้อและเปลี่ยนอิริยาบถเป็นระยะเพื่อลดความตึงตัว\n";
  567.  
  568.       summaryDiv.textContent = summaryText;
  569.       summaryDiv.classList.remove('hidden');
  570.       summaryDiv.scrollIntoView({behavior:'smooth'});
  571.     });
  572.  
  573.   </script>
  574. </body>
  575. </html>
  576.  
  577. ```
  578.  
  579.  
  580. }
Success #stdin #stdout 0.03s 25536KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
The user wants me to create a web application based on the detailed specification provided. The app should:

- Include a landing homepage accessible via QR code (the QR code itself can be generated later; I will make the main page available)
- Display a welcome message and instructions
- Provide a form for personal information input (name, age, gender, and possibly others)
- Include an ergonomic assessment using ROSA (using the existing ergonomic assessment form we created)
- Show recommendations based on ROSA scores and personal info
- Allow saving or displaying a summary of assessments.

I will create a single HTML file with:

- A landing homepage with welcome/instruction section
- A personal info form
- The ROSA ergonomic assessment form (from previous version with images)
- After assessment, show recommendations and summary
- Simple JS navigation between sections/pages
- Save data in localStorage for session persistence (client-side only)
- All inline CSS and JavaScript; no backend
- Add instructions/manual section as per requirements

I will now create this full single-page ergonomic assessment web app with the required features.



`rosa_ergonomic_assessment_app.html`
```html
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>โปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</title>
  <style>
    body {
      font-family: "Kanit", Arial, sans-serif;
      margin: 20px;
      background-color: #f5f7fa;
      color: #333;
    }
    h1, h2 {
      color: #005a9c;
      text-align: center;
    }
    h3 {
      color: #004477;
    }
    .container {
      max-width: 700px;
      margin: 0 auto;
      background: white;
      padding: 20px 25px;
      border-radius: 8px;
      box-shadow: 0 0 12px rgba(0,0,0,0.12);
    }
    .hidden {
      display: none;
    }
    label {
      display: block;
      margin: 12px 0 6px;
      font-weight: 600;
    }
    input[type="text"], input[type="number"], select {
      width: 100%;
      padding: 8px 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 1rem;
    }
    input[type="radio"], input[type="checkbox"] {
      margin-right: 8px;
      vertical-align: middle;
    }
    .inline-label {
      display: inline-block;
      margin-right: 20px;
    }
    button {
      background-color: #005a9c;
      color: white;
      border: none;
      padding: 12px 25px;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      margin: 20px 0;
      display: block;
      width: 100%;
    }
    button:hover {
      background-color: #004077;
    }
    nav {
      text-align: center;
      margin-bottom: 10px;
    }
    nav button {
      margin: 0 5px;
      width: auto;
      padding: 8px 18px;
      font-size: 14px;
    }
    .section-image {
      max-width: 120px;
      float: right;
      margin-left: 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
      padding: 5px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    fieldset {
      border: 1px solid #ddd;
      margin-bottom: 25px;
      padding: 15px 15px 25px 15px;
      border-radius: 6px;
      position: relative;
      overflow: auto;
      clear: both;
    }
    legend {
      font-weight: bold;
      padding: 0 10px;
      color: #005a9c;
    }
    .summary {
      background: #e0f0ff;
      padding: 15px;
      border-radius: 6px;
      border: 1px solid #005a9c;
      margin-top: 20px;
      white-space: pre-line;
    }
    .footer-text {
      font-size: 0.9rem;
      color: #666;
      text-align: center;
      margin-top: 35px;
    }
  </style>
</head>
<body>
  <div class="container">

    <!-- Navigation -->
    <nav>
      <button type="button" id="navHome">หน้าแรก</button>
      <button type="button" id="navPersonal">ข้อมูลส่วนตัว</button>
      <button type="button" id="navAssessment">ประเมิน ROSA</button>
      <button type="button" id="navManual">คู่มือการใช้งาน</button>
    </nav>

    <!-- Home / Welcome Section -->
    <section id="sectionHome">
      <h1>ยินดีต้อนรับสู่โปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</h1>
      <p>
        โปรแกรมนี้ช่วยให้คุณประเมินท่าทางการทำงานและความเสี่ยงทางด้านการยศาสตร์ได้อย่างง่ายดาย เพียงกรอกข้อมูลส่วนตัวและทำแบบประเมินท่าทาง แล้วรับคำแนะนำเพื่อปรับปรุงท่าทางการทำงานให้เหมาะสม
      </p>
      <p><strong>คำแนะนำเบื้องต้น:</strong></p>
      <ul>
        <li>กรอกข้อมูลส่วนตัวให้ครบถ้วนเพื่อการประเมินที่แม่นยำ</li>
        <li>ทำแบบประเมินท่าทางตามคำแนะนำในหน้าประเมิน</li>
        <li>อ่านคำแนะนำหลังการประเมินเพื่อปรับปรุงท่าทางการทำงาน</li>
      </ul>
      <p>คุณสามารถใช้เมนูด้านบนเพื่อเข้าใช้งานส่วนต่าง ๆ ของโปรแกรมได้</p>
    </section>

    <!-- Personal Information Section -->
    <section id="sectionPersonal" class="hidden">
      <h2>กรอกข้อมูลส่วนตัว</h2>
      <form id="personalForm">
        <label for="name">ชื่อ-นามสกุล</label>
        <input type="text" id="name" name="name" placeholder="กรอกชื่อของคุณ" required />

        <label for="age">อายุ</label>
        <input type="number" id="age" name="age" min="10" max="100" placeholder="กรอกอายุ (ปี)" required />

        <label>เพศ</label>
        <div>
          <label class="inline-label"><input type="radio" name="gender" value="ชาย" required /> ชาย</label>
          <label class="inline-label"><input type="radio" name="gender" value="หญิง" /> หญิง</label>
          <label class="inline-label"><input type="radio" name="gender" value="อื่นๆ" /> อื่นๆ</label>
        </div>

        <label for="job">อาชีพ (ถ้ามี)</label>
        <input type="text" id="job" name="job" placeholder="例: พนักงานออฟฟิศ, นักศึกษา" />

        <label for="additionalInfo">ข้อมูลเพิ่มเติม (ถ้ามี)</label>
        <input type="text" id="additionalInfo" name="additionalInfo" placeholder="กรอกข้อมูลเพิ่มเติม เช่น ปัญหาสุขภาพ" />

        <button type="submit">บันทึกข้อมูลส่วนตัว</button>
      </form>
    </section>

    <!-- ROSA Assessment Section -->
    <section id="sectionAssessment" class="hidden">
      <h2>แบบประเมินท่าทางการยศาสตร์ (ROSA)</h2>
      <form id="rosaForm">
        <fieldset class="chair">
          <legend>การประเมินเก้าอี้ (Chair Assessment)</legend>
          <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/c/cb/Office_chair_icon.svg/120px-Office_chair_icon.svg.png" alt="Chair" class="section-image" />
          <label for="seatHeight">ความสูงของที่นั่ง</label>
          <select id="seatHeight" name="seatHeight" required>
            <option value="">-- เลือก --</option>
            <option value="ต่ำ (ต่ำกว่า 40cm)">ต่ำ (ต่ำกว่า 40cm)</option>
            <option value="ปานกลาง (40-50 cm)">ปานกลาง (40-50 cm)</option>
            <option value="สูง (สูงกว่า 50 cm)">สูง (สูงกว่า 50 cm)</option>
          </select>

          <label>มีพนักพิงหลังหรือไม่</label>
          <div class="inline-label">
            <input type="radio" id="backSupportYes" name="backSupport" value="มี" required />
            <label for="backSupportYes">มี</label>
          </div>
          <div class="inline-label">
            <input type="radio" id="backSupportNo" name="backSupport" value="ไม่มี" />
            <label for="backSupportNo">ไม่มี</label>
          </div>

          <label>มีที่วางแขนหรือไม่</label>
          <div class="inline-label">
            <input type="radio" id="armrestsYes" name="armrests" value="มี" required />
            <label for="armrestsYes">มี</label>
          </div>
          <div class="inline-label">
            <input type="radio" id="armrestsNo" name="armrests" value="ไม่มี" />
            <label for="armrestsNo">ไม่มี</label>
          </div>
        </fieldset>

        <fieldset class="monitor">
          <legend>การประเมินจอภาพและโต๊ะทำงาน (Monitor and Desk)</legend>
          <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/d/df/Desktop_monitor_icon.svg/120px-Desktop_monitor_icon.svg.png" alt="Monitor and Desk" class="section-image" />
          <label for="monitorHeight">ระดับความสูงของจอภาพ</label>
          <select id="monitorHeight" name="monitorHeight" required>
            <option value="">-- เลือก --</option>
            <option value="ต่ำกว่าระดับสายตา">ต่ำกว่าระดับสายตา</option>
            <option value="ระดับสายตา">ระดับสายตา</option>
            <option value="สูงกว่าระดับสายตา">สูงกว่าระดับสายตา</option>
          </select>

          <label for="monitorDistance">ระยะห่างของจอภาพจากตา</label>
          <select id="monitorDistance" name="monitorDistance" required>
            <option value="">-- เลือก --</option>
            <option value="ใกล้เกินไป (&lt; 40 cm)">ใกล้เกินไป (&lt; 40 cm)</option>
            <option value="เหมาะสม (40-75 cm)">เหมาะสม (40-75 cm)</option>
            <option value="ห่างเกินไป (&gt; 75 cm)">ห่างเกินไป (&gt; 75 cm)</option>
          </select>

          <label for="deskHeight">ความสูงของโต๊ะทำงาน</label>
          <select id="deskHeight" name="deskHeight" required>
            <option value="">-- เลือก --</option>
            <option value="ต่ำ (ต่ำกว่า 68 cm)">ต่ำ (ต่ำกว่า 68 cm)</option>
            <option value="เหมาะสม (68-75 cm)">เหมาะสม (68-75 cm)</option>
            <option value="สูง (สูงกว่า 75 cm)">สูง (สูงกว่า 75 cm)</option>
          </select>
        </fieldset>

        <fieldset class="keyboard">
          <legend>การประเมินคีย์บอร์ดและเมาส์ (Keyboard and Mouse)</legend>
          <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/3/3b/Computer_keyboard_font_awesome.svg/120px-Computer_keyboard_font_awesome.svg.png" alt="Keyboard and Mouse" class="section-image" />
          <label>ตำแหน่งคีย์บอร์ด</label>
          <div class="inline-label">
            <input type="radio" id="keyboardFlat" name="keyboardPosition" value="แบนราบ" required />
            <label for="keyboardFlat">แบนราบ</label>
          </div>
          <div class="inline-label">
            <input type="radio" id="keyboardTilted" name="keyboardPosition" value="เอียง" />
            <label for="keyboardTilted">เอียง</label>
          </div>

          <label>การใช้เมาส์</label>
          <div class="inline-label">
            <input type="radio" id="mouseLow" name="mouseUse" value="ใช้น้อย" required />
            <label for="mouseLow">ใช้น้อย</label>
          </div>
          <div class="inline-label">
            <input type="radio" id="mouseMedium" name="mouseUse" value="ใช้ปานกลาง" />
            <label for="mouseMedium">ใช้ปานกลาง</label>
          </div>
          <div class="inline-label">
            <input type="radio" id="mouseHigh" name="mouseUse" value="ใช้มาก" />
            <label for="mouseHigh">ใช้มาก</label>
          </div>
        </fieldset>

        <fieldset class="posture">
          <legend>ท่าทางร่างกาย (Body Posture)</legend>
          <img src="https://u...content-available-to-author-only...a.org/wikipedia/commons/thumb/1/12/Ergonomic_seated_posture.svg/120px-Ergonomic_seated_posture.svg.png" alt="Body Posture" class="section-image" />
          <label for="neckAngle">มุมของคอ</label>
          <select id="neckAngle" name="neckAngle" required>
            <option value="">-- เลือก --</option>
            <option value="เป็นกลาง (0-10°)">เป็นกลาง (0-10°)</option>
            <option value="ปานกลาง (11-20°)">ปานกลาง (11-20°)</option>
            <option value="มาก (21° ขึ้นไป)">มาก (21° ขึ้นไป)</option>
          </select>

          <label for="backAngle">มุมของหลัง</label>
          <select id="backAngle" name="backAngle" required>
            <option value="">-- เลือก --</option>
            <option value="ตรง (75° - 90°)">ตรง (75° - 90°)</option>
            <option value="โน้มไปข้างหน้า (45° - 75°)">โน้มไปข้างหน้า (45° - 75°)</option>
            <option value="กดหลัง (ต่ำกว่า 45°)">กดหลัง (ต่ำกว่า 45°)</option>
          </select>

          <label for="armPosition">ตำแหน่งแขน</label>
          <select id="armPosition" name="armPosition" required>
            <option value="">-- เลือก --</option>
            <option value="ชิดลำตัว">ชิดลำตัว</option>
            <option value="ยื่นไปข้างหน้า">ยื่นไปข้างหน้า</option>
            <option value="ยกขึ้นเหนือโต๊ะ">ยกขึ้นเหนือโต๊ะ</option>
          </select>
        </fieldset>

        <button type="submit">ประเมินผล</button>
      </form>
      <div id="assessmentSummary" class="summary hidden"></div>
    </section>

    <!-- User Manual Section -->
    <section id="sectionManual" class="hidden">
      <h2>คู่มือการใช้งาน</h2>
      <p>ในหน้านี้คุณจะพบคำอธิบายขั้นตอนการใช้งานโปรแกรมประเมินท่าทางการยศาสตร์ด้วย ROSA</p>
      <ul>
        <li><strong>กรอกข้อมูลส่วนตัว:</strong> ให้กรอกข้อมูลพื้นฐาน เช่น ชื่อ อายุ เพศ และข้อมูลอื่นๆ เพื่อใช้ในการประเมินความเสี่ยง</li>
        <li><strong>แบบประเมิน ROSA:</strong> ทำแบบประเมินตามคำแนะนำ เช่น ตำแหน่งเก้าอี้ ระดับจอภาพ และท่าทางร่างกาย</li>
        <li><strong>การดูผลลัพธ์:</strong> หลังจากส่งแบบประเมิน โปรแกรมจะแสดงผลการประเมินและคำแนะนำด้านการปรับปรุงท่าทาง</li>
        <li><strong>ความปลอดภัยข้อมูล:</strong> ข้อมูลของคุณจะถูกเก็บเป็นความลับและไม่ถูกเปิดเผยต่อบุคคลภายนอก</li>
      </ul>
      <p>หากมีคำถามเพิ่มเติม สามารถติดต่อเจ้าหน้าที่หรือผู้ดูแลระบบเพื่อขอความช่วยเหลือได้</p>
    </section>

    <div class="footer-text">
      &copy; 2024 โปรแกรมประเมินท่าทางการยศาสตร์ ROSA
    </div>
  </div>

  <script>
    // Navigation buttons
    const navHome = document.getElementById('navHome');
    const navPersonal = document.getElementById('navPersonal');
    const navAssessment = document.getElementById('navAssessment');
    const navManual = document.getElementById('navManual');

    // Sections
    const sectionHome = document.getElementById('sectionHome');
    const sectionPersonal = document.getElementById('sectionPersonal');
    const sectionAssessment = document.getElementById('sectionAssessment');
    const sectionManual = document.getElementById('sectionManual');

    function showSection(section) {
      // Hide all
      sectionHome.classList.add('hidden');
      sectionPersonal.classList.add('hidden');
      sectionAssessment.classList.add('hidden');
      sectionManual.classList.add('hidden');
      // Show chosen
      section.classList.remove('hidden');
      window.scrollTo(0,0);
    }

    navHome.addEventListener('click', () => showSection(sectionHome));
    navPersonal.addEventListener('click', () => showSection(sectionPersonal));
    navAssessment.addEventListener('click', () => {
      // Only allow access if personal info saved
      if (!localStorage.getItem('personalInfo')) {
        alert('กรุณากรอกและบันทึกข้อมูลส่วนตัวก่อนทำแบบประเมินท่าทาง');
        showSection(sectionPersonal);
        return;
      }
      showSection(sectionAssessment);
    });
    navManual.addEventListener('click', () => showSection(sectionManual));

    // Personal info form submit
    const personalForm = document.getElementById('personalForm');
    personalForm.addEventListener('submit', function(event) {
      event.preventDefault();

      const data = {
        name: personalForm.name.value.trim(),
        age: personalForm.age.value,
        gender: personalForm.gender.value,
        job: personalForm.job.value.trim(),
        additionalInfo: personalForm.additionalInfo.value.trim()
      };

      // Simple validation (already required in inputs)
      localStorage.setItem('personalInfo', JSON.stringify(data));
      alert('บันทึกข้อมูลส่วนตัวเรียบร้อยแล้ว');
      showSection(sectionAssessment);
    });

    // Restore personal info if available
    window.addEventListener('load', () => {
      let saved = localStorage.getItem('personalInfo');
      if (saved) {
        let data = JSON.parse(saved);
        personalForm.name.value = data.name || '';
        personalForm.age.value = data.age || '';
        let genderElems = personalForm.gender;
        for(let i=0; i<genderElems.length; i++) {
          if(genderElems[i].value === data.gender){
            genderElems[i].checked = true;
          }
        }
        personalForm.job.value = data.job || '';
        personalForm.additionalInfo.value = data.additionalInfo || '';
      }
      showSection(sectionHome);
    });

    // ROSA form handling
    const rosaForm = document.getElementById('rosaForm');
    const summaryDiv = document.getElementById('assessmentSummary');

    rosaForm.addEventListener('submit', function(event) {
      event.preventDefault();

      const form = event.target;

      // Collect ROSA data
      const data = {
        'ความสูงของที่นั่ง': form.seatHeight.value,
        'พนักพิงหลัง': form.backSupport.value,
        'ที่วางแขน': form.armrests.value,
        'ระดับความสูงของจอภาพ': form.monitorHeight.value,
        'ระยะห่างของจอภาพจากตา': form.monitorDistance.value,
        'ความสูงของโต๊ะทำงาน': form.deskHeight.value,
        'ตำแหน่งคีย์บอร์ด': form.keyboardPosition.value,
        'การใช้เมาส์': form.mouseUse.value,
        'มุมของคอ': form.neckAngle.value,
        'มุมของหลัง': form.backAngle.value,
        'ตำแหน่งแขน': form.armPosition.value,
      };

      // Simple ROSA risk score estimation for demo purposes
      // Assign numeric scores to options for a rough risk score
      function scoreOption(value, mapping) {
        return mapping[value] || 0;
      }

      const scoreMap = {
        seatHeight: {
          "ต่ำ (ต่ำกว่า 40cm)": 2,
          "ปานกลาง (40-50 cm)": 1,
          "สูง (สูงกว่า 50 cm)": 3,
        },
        backSupport: {
          "มี": 0,
          "ไม่มี": 3,
        },
        armrests: {
          "มี": 0,
          "ไม่มี": 2,
        },
        monitorHeight: {
          "ต่ำกว่าระดับสายตา": 2,
          "ระดับสายตา": 0,
          "สูงกว่าระดับสายตา": 2,
        },
        monitorDistance: {
          "ใกล้เกินไป (< 40 cm)": 3,
          "ใกล้เกินไป (&lt; 40 cm)":3,
          "เหมาะสม (40-75 cm)": 0,
          "ห่างเกินไป (> 75 cm)": 2,
          "ห่างเกินไป (&gt; 75 cm)": 2,
          "ใกล้เกินไป (&lt; 40 cm)":3,
        },
        deskHeight: {
          "ต่ำ (ต่ำกว่า 68 cm)": 2,
          "เหมาะสม (68-75 cm)": 0,
          "สูง (สูงกว่า 75 cm)": 2,
        },
        keyboardPosition: {
          "แบนราบ": 0,
          "เอียง": 2,
        },
        mouseUse: {
          "ใช้น้อย": 0,
          "ใช้ปานกลาง": 1,
          "ใช้มาก": 3,
        },
        neckAngle: {
          "เป็นกลาง (0-10°)": 0,
          "ปานกลาง (11-20°)": 2,
          "มาก (21° ขึ้นไป)": 4,
        },
        backAngle: {
          "ตรง (75° - 90°)": 0,
          "โน้มไปข้างหน้า (45° - 75°)": 3,
          "กดหลัง (ต่ำกว่า 45°)": 5,
        },
        armPosition: {
          "ชิดลำตัว": 0,
          "ยื่นไปข้างหน้า": 2,
          "ยกขึ้นเหนือโต๊ะ": 3,
        }
      };

      let totalScore = 0;
      for (const key in data) {
        // Map keys to scoreMap keys (some keys same but some differ, handle carefully)
        let mapKey = "";
        switch(key) {
          case 'ความสูงของที่นั่ง': mapKey = 'seatHeight'; break;
          case 'พนักพิงหลัง': mapKey = 'backSupport'; break;
          case 'ที่วางแขน': mapKey = 'armrests'; break;
          case 'ระดับความสูงของจอภาพ': mapKey = 'monitorHeight'; break;
          case 'ระยะห่างของจอภาพจากตา': mapKey = 'monitorDistance'; break;
          case 'ความสูงของโต๊ะทำงาน': mapKey = 'deskHeight'; break;
          case 'ตำแหน่งคีย์บอร์ด': mapKey = 'keyboardPosition'; break;
          case 'การใช้เมาส์': mapKey = 'mouseUse'; break;
          case 'มุมของคอ': mapKey = 'neckAngle'; break;
          case 'มุมของหลัง': mapKey = 'backAngle'; break;
          case 'ตำแหน่งแขน': mapKey = 'armPosition'; break;
        }
        totalScore += scoreOption(data[key], scoreMap[mapKey]);
      }

      // Risk level based on totalScore
      let riskLevel = "";
      let recommendations = "";
      if (totalScore <= 5) {
        riskLevel = "ระดับความเสี่ยงต่ำ";
        recommendations = "ท่าทางของคุณอยู่ในเกณฑ์ปลอดภัย แนะนำให้รักษาสภาพการทำงานเดิมไว้และพักผ่อนเมื่อรู้สึกเมื่อยล้า";
      } else if (totalScore <= 12) {
        riskLevel = "ระดับความเสี่ยงปานกลาง";
        recommendations = "แนะนำให้ปรับเปลี่ยนท่าทางบางส่วน เช่น การปรับความสูงของเก้าอี้และจอภาพ รวมถึงพักเบรกบ่อยขึ้น";
      } else {
        riskLevel = "ระดับความเสี่ยงสูง";
        recommendations = "ควรปรับปรุงท่าทางอย่างเร่งด่วน โดยปรึกษาผู้เชี่ยวชาญด้านการยศาสตร์และปรับอุปกรณ์ทำงานให้เหมาะสม";
      }

      // Show personal info summary
      let personalInfo = localStorage.getItem('personalInfo');
      personalInfo = personalInfo ? JSON.parse(personalInfo) : null;

      let summaryText = "ผลสรุปการประเมินท่าทางการยศาสตร์ด้วย ROSA\n\n";
      if(personalInfo){
        summaryText += `ชื่อ: ${personalInfo.name}\n`;
        summaryText += `อายุ: ${personalInfo.age}\n`;
        summaryText += `เพศ: ${personalInfo.gender}\n`;
        if(personalInfo.job) summaryText += `อาชีพ: ${personalInfo.job}\n`;
        if(personalInfo.additionalInfo) summaryText += `ข้อมูลเพิ่มเติม: ${personalInfo.additionalInfo}\n`;
      }

      summaryText += "\nข้อมูลแบบประเมิน:\n";
      for (const key in data) {
        summaryText += `- ${key}: ${data[key]}\n`;
      }

      summaryText += `\nคะแนนรวมความเสี่ยง: ${totalScore}\n`;
      summaryText += `ระดับความเสี่ยง: ${riskLevel}\n\n`;
      summaryText += `คำแนะนำ:\n${recommendations}\n\n`;

      // Additional recommendations for musculoskeletal health
      summaryText += "คำแนะนำเพิ่มเติมสำหรับความผิดปกติของโครงร่างกล้ามเนื้อ:\n";
      summaryText += "- นั่งหลังตรง และใช้พนักพิงหลังให้เหมาะสม\n";
      summaryText += "- ปรับความสูงโต๊ะและเก้าอี้ให้พอดีกับระดับศีรษะและข้อศอก\n";
      summaryText += "- ใช้เมาส์และคีย์บอร์ดในตำแหน่งที่สบายและลดการยกไหล่\n";
      summaryText += "- พักสายตาทุก 20 นาที โดยการมองไปไกลประมาณ 20 ฟุต เป็นเวลา 20 วินาที\n";
      summaryText += "- ยืดเหยียดกล้ามเนื้อและเปลี่ยนอิริยาบถเป็นระยะเพื่อลดความตึงตัว\n";

      summaryDiv.textContent = summaryText;
      summaryDiv.classList.remove('hidden');
      summaryDiv.scrollIntoView({behavior:'smooth'});
    });

  </script>
</body>
</html>

```


}
https://ideone.com/UEEFU3
language:
PHP (php 7.3.5)
created:
7 days ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!