<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOCRA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="left-section">
        <h1>BOCRA</h1>
        <div class="questions">
            <h2>Questions</h2>
            <table id="quizTable">
                <tr>
                    <td>1. How many substrates can this reaction effectively target?</td>
                    <td>
                        <select name="question1" onchange="updateLayerVisibility(this.value, 1)">
                            <option value="-1"></option>
                            <option value="3">10+ substrates</option>
                            <option value="2">5-9 substrates</option>
                            <option value="1">Less than 5 substrates</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>2. What is the average product yield percentage?</td>
                    <td>
                        <select name="question2" onchange="updateLayerVisibility(this.value, 2)">
                            <option value="-1"></option>
                            <option value="3">>90% yield</option>
                            <option value="2">70-90% yield</option>
                            <option value="1"><70% yield</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>3. How long does the reaction take to reach completion?</td>
                    <td>
                        <select name="question3" onchange="updateLayerVisibility(this.value, 3)">
                            <option value="-1"></option>
                            <option value="3"><1 hour</option>
                            <option value="2">1-4 hours</option>
                            <option value="1">>4 hours</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>4. What temperature is required for the reaction?</td>
                    <td>
                        <select name="question4" onchange="updateLayerVisibility(this.value, 4)">
                            <option value="-1"></option>
                            <option value="3">Room temperature (20-25&deg;C)</option>
                            <option value="2">Moderate temperature (25-80&deg;C)</option>
                            <option value="1">High temperature (>80&deg;C)</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>5. What is the estimated cost of reagents per gram (or mL) of product?</td>
                    <td>
                        <select name="question5" onchange="updateLayerVisibility(this.value, 5)">
                            <option value="-1"></option>
                            <option value="3"><$10</option>
                            <option value="2">$10-$100</option>
                            <option value="1">>$100</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>6. What percentage of atoms in the reactants end up in the final product?</td>
                    <td>
                        <select name="question6" onchange="updateLayerVisibility(this.value, 6)">
                            <option value="-1"></option>
                            <option value="3">>80%</option>
                            <option value="2">50-80%</option>
                            <option value="1"><50%</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>7. How many purification steps are required?</td>
                    <td>
                        <select name="question7" onchange="updateLayerVisibility(this.value, 7)">
                            <option value="-1"></option>
                            <option value="3">0-1 steps</option>
                            <option value="2">2-3 steps</option>
                            <option value="1">>3 steps</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>8. How many kilograms of waste are produced per kilogram of product?</td>
                    <td>
                        <select name="question8" onchange="updateLayerVisibility(this.value, 8)">
                            <option value="-1"></option>
                            <option value="3"><0.1 kg waste/kg product</option>
                            <option value="2">0.1-1 kg waste/kg product</option>
                            <option value="1">>1 kg waste/kg product</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>9. What is the energy requirement per kilogram of product?</td>
                    <td>
                        <select name="question9" onchange="updateLayerVisibility(this.value, 9)">
                            <option value="-1"></option>
                            <option value="3"><5 kWh/kg</option>
                            <option value="2">5-10 kWh/kg</option>
                            <option value="1">>10 kWh/kg</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>10. Can this reaction be scaled without modifications?</td>
                    <td>
                        <select name="question10" onchange="updateLayerVisibility(this.value, 10)">
                            <option value="-1"></option>
                            <option value="3">Industrial scale-ready without modifications</option>
                            <option value="2">Minor modifications needed for scale-up</option>
                            <option value="1">Major modifications required for scale-up</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>11. What level of equipment is needed to perform this reaction?</td>
                    <td>
                        <select name="question11" onchange="updateLayerVisibility(this.value, 11)">
                            <option value="-1"></option>
                            <option value="3">Basic lab equipment</option>
                            <option value="2">Moderate specialized equipment</option>
                            <option value="1">Highly specialized equipment</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>12. What level of catalyst is needed for the reaction?</td>
                    <td>
                        <select name="question12" onchange="updateLayerVisibility(this.value, 12)">
                            <option value="-1"></option>
                            <option value="3">No catalyst needed</option>
                            <option value="2">Catalyst is recommended but not essential</option>
                            <option value="1">Catalyst is essential</option>
                            <option value="0">Not applicable</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="frame">
<div class="circle" id="pointsCircle">0</div>
         <img src="bar_28.png" alt="Bar" class="bar bar_28">
         <img src="bar_30.png" alt="Bar" class="bar bar_30">
         <img src="bar_32.png" alt="Bar" class="bar bar_32">
         <img src="bar_34.png" alt="Bar" class="bar bar_34">
         <img src="bar_36.png" alt="Bar" class="bar bar_36">
         <img src="bar_38.png" alt="Bar" class="bar bar_38">
         <img src="bar_40.png" alt="Bar" class="bar bar_40">
         <img src="bar_42.png" alt="Bar" class="bar bar_42">
         <img src="bar_44.png" alt="Bar" class="bar bar_44">
         <img src="bar_46.png" alt="Bar" class="bar bar_46">
         <img src="bar_48.png" alt="Bar" class="bar bar_48">
         <img src="bar_50.png" alt="Bar" class="bar bar_50">
         <img src="bar_52.png" alt="Bar" class="bar bar_52">
         <img src="bar_54.png" alt="Bar" class="bar bar_54">
         <img src="bar_56.png" alt="Bar" class="bar bar_56">
         <img src="bar_58.png" alt="Bar" class="bar bar_58">
         <img src="bar_60.png" alt="Bar" class="bar bar_60">
         <img src="bar_62.png" alt="Bar" class="bar bar_62">
         <img src="bar_64.png" alt="Bar" class="bar bar_64">
         <img src="bar_66.png" alt="Bar" class="bar bar_66">
         <img src="bar_68.png" alt="Bar" class="bar bar_68">
         <img src="bar_70.png" alt="Bar" class="bar bar_70">
         <img src="bar_72.png" alt="Bar" class="bar bar_72">
         <img src="bar_74.png" alt="Bar" class="bar bar_74">
         <img src="bar_75.png" alt="Bar" class="bar bar_75">
         <img src="bar_76.png" alt="Bar" class="bar bar_76">
         <img src="bar_78.png" alt="Bar" class="bar bar_78">
         <img src="bar_80.png" alt="Bar" class="bar bar_80">
         <img src="bar_82.png" alt="Bar" class="bar bar_82">
         <img src="bar_84.png" alt="Bar" class="bar bar_84">
         <img src="bar_86.png" alt="Bar" class="bar bar_86">
         <img src="bar_88.png" alt="Bar" class="bar bar_88">
         <img src="bar_90.png" alt="Bar" class="bar bar_90">
         <img src="bar_92.png" alt="Bar" class="bar bar_92">
         <img src="bar_94.png" alt="Bar" class="bar bar_94">
         <img src="bar_96.png" alt="Bar" class="bar bar_96">
         <img src="bar_98.png" alt="Bar" class="bar bar_98">
         <img src="bar_100.png" alt="Bar" class="bar bar_100">
         <img src="borders.png" alt="Base Image" class="base-image">
        <img src="g1.png" alt="G1" class="layer g1">
        <img src="g2.png" alt="G2" class="layer g2">
        <img src="g3.png" alt="G3" class="layer g3">
        <img src="g4.png" alt="G4" class="layer g4">
        <img src="g5.png" alt="G5" class="layer g5">
        <img src="g6.png" alt="G6" class="layer g6">
        <img src="g7.png" alt="G7" class="layer g7">
        <img src="g8.png" alt="g8" class="layer g8">
        <img src="g9.png" alt="G9" class="layer g9">
        <img src="g10.png" alt="G10" class="layer g10">
        <img src="g11.png" alt="G11" class="layer g11">
        <img src="g12.png" alt="G12" class="layer g12">
        <img src="y1.png" alt="y1" class="layer yy1">
        <img src="y2.png" alt="y2" class="layer yy2">
        <img src="y3.png" alt="y3" class="layer yy3">
        <img src="y4.png" alt="y4" class="layer yy4">
        <img src="y5.png" alt="y5" class="layer yy5">
        <img src="y6.png" alt="y6" class="layer yy6">
        <img src="y7.png" alt="y7" class="layer yy7">
        <img src="y8.png" alt="y8" class="layer yy8">
        <img src="y9.png" alt="y9" class="layer yy9">
        <img src="y10.png" alt="y10" class="layer yy10">
        <img src="y11.png" alt="y11" class="layer yy11">
        <img src="y12.png" alt="y12" class="layer yy12">
       	<img src="r1.png" alt="r1" class="layer rr1">
        <img src="r2.png" alt="r2" class="layer rr2">
        <img src="r3.png" alt="r3" class="layer rr3">
        <img src="r4.png" alt="r4" class="layer rr4">
        <img src="r5.png" alt="r5" class="layer rr5">
        <img src="r6.png" alt="r6" class="layer rr6">
        <img src="r7.png" alt="r7" class="layer rr7">
        <img src="r8.png" alt="r8" class="layer rr8">
        <img src="r9.png" alt="r9" class="layer rr9">
        <img src="r10.png" alt="r10" class="layer rr10">
        <img src="r11.png" alt="r11" class="layer rr11">
        <img src="r12.png" alt="r12" class="layer rr12">
       	<img src="gr1.png" alt="gr1" class="layer gr1">
        <img src="gr2.png" alt="gr2" class="layer gr2">
        <img src="gr3.png" alt="gr3" class="layer gr3">
        <img src="gr4.png" alt="gr4" class="layer gr4">
        <img src="gr5.png" alt="gr5" class="layer gr5">
        <img src="gr6.png" alt="gr6" class="layer gr6">
        <img src="gr7.png" alt="gr7" class="layer gr7">
        <img src="gr8.png" alt="gr8" class="layer gr8">
        <img src="gr9.png" alt="gr9" class="layer gr9">
        <img src="gr10.png" alt="gr10" class="layer gr10">
        <img src="gr11.png" alt="gr11" class="layer gr11">
        <img src="gr12.png" alt="gr12" class="layer gr12">
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

