{"id":482,"date":"2024-09-12T16:33:29","date_gmt":"2024-09-12T16:33:29","guid":{"rendered":"https:\/\/www.mathros.net.ua\/en\/?page_id=482"},"modified":"2025-10-05T08:43:27","modified_gmt":"2025-10-05T08:43:27","slug":"rectangle-method-calculator","status":"publish","type":"page","link":"https:\/\/www.mathros.net.ua\/en\/rectangle-method-calculator","title":{"rendered":"Rectangle Method Calculator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"482\" class=\"elementor elementor-482\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a2badd e-flex e-con-boxed e-con e-parent\" data-id=\"5a2badd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8c4beb elementor-widget elementor-widget-html\" data-id=\"f8c4beb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"h2-title\">Want to Calculate a Definite Integral in No Time? Use Our Simple Online Calculator for Fast and Effortless Results!<\/h2>\n<style>\n    .h2-title {\n        text-align: center; \/* \u0412\u0438\u0440\u0456\u0432\u043d\u044e\u0432\u0430\u043d\u043d\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 *\/\n        color: gray; \/* \u0417\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0441\u0456\u0440\u043e\u0433\u043e \u043a\u043e\u043b\u044c\u043e\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        font-size: 24px; \/* \u0422\u0440\u043e\u0445\u0438 \u0431\u0456\u043b\u044c\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        font-weight: 600; \/* \u041d\u0430\u043f\u0456\u0432\u0436\u0438\u0440\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u0430\u043a\u0446\u0435\u043d\u0442\u0443 *\/\n        line-height: 1.4; \/* \u041a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u0438\u0439 \u043c\u0456\u0436\u0440\u044f\u0434\u043a\u043e\u0432\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b *\/\n        margin-top: 5px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u0432\u0435\u0440\u0445\u0443 \u0434\u043b\u044f \u0433\u0430\u0440\u043c\u043e\u043d\u0456\u0439\u043d\u043e\u0441\u0442\u0456 *\/\n        margin-bottom: 15px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u043d\u0438\u0437\u0443 *\/\n        padding: 10px; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u0440\u0430\u0449\u043e\u0433\u043e \u0432\u0438\u0433\u043b\u044f\u0434\u0443 *\/\n        font-family: 'Arial', sans-serif; \/* \u0417\u0440\u0443\u0447\u043d\u0438\u0439 \u0456 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 *\/\n        word-wrap: break-word; \/* \u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0441\u043b\u0456\u0432 \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n    }\n\n    \/* \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0456\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n    @media (max-width: 768px) {\n        .h2-title {\n            font-size: 20px; \/* \u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n            padding: 8px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f *\/\n        }\n    }\n\n    @media (max-width: 480px) {\n        .h2-title {\n            font-size: 18px; \/* \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 \u0434\u043b\u044f \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0456\u0432 *\/\n            padding: 5px; \/* \u041c\u0456\u043d\u0456\u043c\u0430\u043b\u044c\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f *\/\n        }\n    }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99e8665 elementor-widget elementor-widget-html\" data-id=\"99e8665\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script type=\"text\/javascript\" async src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjax\/2.7.7\/MathJax.js?config=TeX-MML-AM_CHTML\"><\/script>\n<link rel=\"stylesheet\" href=\"mathquill\/lib\/mathquill.css\">\n<script src=\"mathquill\/lib\/jquery.min.js\"><\/script>\n<script src=\"mathquill\/lib\/mathquill.min.js\"><\/script>\n<script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script> <!-- D3.js library -->\n  \n<div class=\"calculator-container\">\n    <div class=\"equation-container\">\n        <label for=\"inputField\">Integrand Function (e.g., <i>\"x^2\"<\/i>, <i>\"sin(x)\"<\/i>, <i>\"exp(x)\"<\/i>)<\/label>\n        <hr>\n        <div class=\"calcKeypad\">\n            <button class=\"padBtn\" onclick=\"addSymbol('x^n')\">x^n<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\sqrt{}')\">\u221ax<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\cdot')\">\u00b7<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\frac{}{}')\">x\/y<\/button>\n             <button class=\"padBtn\" onclick=\"addSymbol('\\\\exp()')\">exp<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\sin()')\">sin<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\cos()')\">cos<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\tan()')\">tan<\/button>\n            <button class=\"padBtn\" onclick=\"addSymbol('\\\\log()')\">log<\/button>\n        <\/div>\n        <span id=\"inputField\" contenteditable=\"true\" class=\"math-input\"><\/span>\n    <\/div>\n    \n    \n    <div class=\"parameter-container\">\n        <!--<input type=\"text\" id=\"function\" name=\"function\" required \/>-->\n        <label for=\"lower_limit\">Lower Integration Limit<\/label>\n        <input type=\"number\" id=\"lower_limit\" name=\"lower_limit\" required \/>\n        <label for=\"upper_limit\">Upper Integration Limit<\/label>\n        <input type=\"number\" id=\"upper_limit\" name=\"upper_limit\" required \/>\n        <label for=\"num_partitions\">Number of Partitions for the Integration Interval<\/label>\n        <input type=\"number\" id=\"num_partitions\" name=\"num_partitions\" required>\n        <label for=\"num_partitions\">Rectangle Method Type<\/label>\n        <select id=\"type\" name=\"type\">\n            <option selected value=\"-1\">Left Rectangle Method<\/option>\n            <option value=\"0\">Midpoint Rectangle Method<\/option>\n            <option value=\"1\">Right Rectangle Method<\/option>\n        <\/select>\n    <\/div>\n    <input type=\"button\" id=\"generate-button\" name=\"integral\"  value=\"Calculate\" onclick=\"calculateIntegral()\" \/>\n    <div id=\"info-block\" class=\"info-message\">\n        When you <strong>reduce the step size<\/strong> and <strong>increase the number of intervals<\/strong>, your result becomes much more <strong>accurate<\/strong>\u2014try it!.\n    <\/div>\n<\/div>\n<div id=\"calculation-results\" style=\"display: none;\">\n        \n    <div id=\"fcontainer\" class=\"solution-container\"><\/div>\n<\/div>\n<div id=\"error-block\" class=\"error-message\"><\/div>\n<div id=\"loading\" class=\"loader\" style=\"display: none;\"><\/div>\n\n<style>\n    .info-message {\n        background-color: #eaf6ff; \/* \u0421\u0432\u0456\u0442\u043b\u043e-\u0431\u043b\u0430\u043a\u0438\u0442\u043d\u0438\u0439 \u0444\u043e\u043d \u0434\u043b\u044f \u0432\u0438\u0434\u0456\u043b\u0435\u043d\u043d\u044f *\/\n        color: #0b638b; \/* \u0422\u0435\u043c\u043d\u043e-\u0441\u0438\u043d\u0456\u0439 \u0442\u0435\u043a\u0441\u0442 *\/\n        border-left: 4px solid #0b638b; \/* \u0412\u0438\u0434\u0456\u043b\u0435\u043d\u043d\u044f \u0437\u043b\u0456\u0432\u0430 \u0434\u043b\u044f \u0430\u043a\u0446\u0435\u043d\u0442\u0443 *\/\n        padding: 15px; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438 *\/\n        margin-bottom: 15px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u043d\u0438\u0437\u0443 *\/\n        border-radius: 5px; \/* \u0417\u0430\u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0456 \u043a\u0443\u0442\u0438 *\/\n        font-family: 'Arial', sans-serif; \/* \u0417\u0440\u0443\u0447\u043d\u0438\u0439 \u0434\u043b\u044f \u0447\u0438\u0442\u0430\u043d\u043d\u044f \u0448\u0440\u0438\u0444\u0442 *\/\n        font-size: 14px; \/* \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        line-height: 1.5; \/* \u041a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u0438\u0439 \u043c\u0456\u0436\u0440\u044f\u0434\u043a\u043e\u0432\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b *\/\n        text-align: left; \/* \u0412\u0438\u0440\u0456\u0432\u043d\u044e\u0432\u0430\u043d\u043d\u044f \u043f\u043e \u043b\u0456\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e *\/\n    }\n\n\/* \u0417\u0430\u0433\u0430\u043b\u044c\u043d\u0456 \u0441\u0442\u0438\u043b\u0456 \u0434\u043b\u044f \u0441\u0442\u043e\u0440\u0456\u043d\u043a\u0438 *\/\n    body {\n        font-family: 'Arial', sans-serif;\n        margin: 0;\n        padding: 0;\n        background-color: #f4f4f4;\n    }\n    \n    \/* \u041e\u0441\u043d\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440\u0430 *\/\n    .calculator-container {\n        max-width: 600px;\n        margin: 0 auto;\n        padding: 20px;\n        text-align: center;\n    }\n    \n    \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0440\u0456\u0432\u043d\u044f\u043d\u044c *\/\n    .equation-container {\n        background-color: #0B638B;\n        padding: 20px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        color: #fff;\n    }\n    \n    \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0456\u0432 *\/\n    .parameter-container {\n        background-color: white;\n        padding-left: 20px;\n        padding-right: 20px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        color: #fff;\n    }\n    \n    \/* \u0421\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0456\u0432 \u0442\u0430 \u043c\u0456\u0442\u043e\u043a *\/\n    label {\n        display: block;\n        margin-bottom: 8px;\n        font-size: 16px;\n        color: #555;\n        font-weight: 600;\n        text-align: left;\n    }\n    \n    .equation-container label {\n        color: #fff;\n        font-weight: bold;\n    }\n    \n    \/* \u041f\u043e\u043b\u044f \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0440\u0456\u0432\u043d\u044f\u043d\u044c *\/\n    .math-input {\n        display: block;\n        width: 100%;\n        min-height: 40px;\n        padding: 10px;\n        border: none;\n        border-radius: 6px;\n        background: #fff;\n        font-size: 16px;\n        text-align: left;\n        color: #333;\n        cursor: text;\n    }\n    \n    \/* \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430 \u043b\u0456\u043d\u0456\u044f *\/\n    .equation-container hr {\n        border: none;\n        height: 1px;\n        background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));\n        margin-bottom: 15px;\n    }\n    \n    \/* \u041f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0443 \u0442\u0430 \u0432\u0438\u043f\u0430\u0434\u0430\u044e\u0447\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a *\/\n    input, select {\n        width: 100%;\n        padding: 10px;\n        margin: 7px 0;\n        border: 1px solid #ddd;\n        border-radius: 5px;\n        font-size: 16px;\n    }\n    \n    \/* \u041a\u043b\u0430\u0432\u0456\u0430\u0442\u0443\u0440\u0430 \u0437 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 *\/\n    .calcKeypad {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 5px;\n        margin: 15px 0;\n    }\n    \n    .padBtn {\n        padding: 10px;\n        background-color: rgba(255, 255, 255, 0.2);\n        color: #fff;\n        border-radius: 5px;\n        font-size: 14px;\n        cursor: pointer;\n        transition: all 0.3s ease;\n        border: none;\n    }\n    \n    .padBtn:hover {\n        background-color: rgba(255, 255, 255, 0.4);\n    }\n    \n    \/* \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0431\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044f *\/\n    #generate-button {\n        width: 100%;\n        padding: 12px;\n        background-color: #0B638B;\n        color: white;\n        border: none;\n        border-radius: 5px;\n        font-size: 16px;\n        cursor: pointer;\n        margin-top: 10px;\n        transition: background-color 0.3s ease;\n    }\n    \n    #generate-button:hover {\n        background-color: #065a71;\n    }\n    \n    \/* \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0456\u0432 *\/\n    .solution-container {\n        background-color: #ffffff;\n        padding: 20px;\n        margin-top: 15px;\n        margin-bottom: 15px;\n        font-size: 16px;\n        color: #333;\n        line-height: 1.6;\n        max-width: 800px;\n        margin-left: auto;\n        margin-right: auto;\n        overflow-x: auto;\n    }\n    \n    \/* \u0410\u043d\u0456\u043c\u0430\u0446\u0456\u044f \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f *\/\n    .loader {\n        display: block;\n        margin: 20px auto;\n        border: 8px solid #f3f3f3;\n        border-top: 8px solid #0B638B;\n        border-radius: 50%;\n        width: 75px;\n        height: 75px;\n        animation: spin 1s linear infinite;\n    }\n    \n    @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n    }\n    \n    \/* \u041f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443 *\/\n    .error-message {\n        background-color: #fdecea;\n        color: #b71c1c;\n        border-left: 4px solid #b71c1c;\n        border-radius: 5px;\n        padding: 15px;\n        margin-top: 10px;\n        font-size: 16px;\n        display: none;\n    }\n    \n    .error-message.show {\n        display: block;\n        animation: fadeIn 0.5s ease-in-out;\n    }\n    \n    \/* \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0456\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n    @media (max-width: 768px) {\n        .calculator-container {\n            padding: 15px;\n        }\n    \n        .padBtn {\n            font-size: 12px;\n        }\n    \n        #generate-button {\n            font-size: 12px;\n        }\n        \n        .formula {\n            font-size: 14px;\n            padding: 4px;\n        }\n    }\n    \n    @media (max-width: 480px) {\n        .calcKeypad {\n            flex-wrap: wrap;\n        }\n    \n        .padBtn {\n            max-width: 48%;\n            margin-bottom: 5px;\n            font-size: 10px;\n        }\n    \n        input, select {\n            font-size: 14px;\n        }\n    \n        #generate-button {\n            font-size: 10px;\n        }\n        \n        .formula {\n            font-size: 12px;\n            padding: 3px;\n        }\n    }\n    \/* \u0421\u0442\u0438\u043b\u044c \u0434\u043b\u044f SVG-\u0433\u0440\u0430\u0444\u0456\u043a\u0430 *\/\n    #graph-svg {\n        width: 100%;\n        max-width: 700px;\n        height: auto;\n        display: block;\n        margin: 50px 0px auto;\n        background-color: #ffffff;\n    }\n    \n    .formula {\n        font-family: 'STIX Two Math', serif; \/* \u0428\u0440\u0438\u0444\u0442 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0443\u043b *\/\n        background-color: #ffffff; \/* \u0411\u0456\u043b\u0438\u0439 \u0444\u043e\u043d *\/\n        padding: 5px; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f *\/\n        margin-bottom: 5px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u043c\u0456\u0436 \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u043c\u0438 *\/\n        overflow-x: auto; \/* \u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0434\u043b\u044f \u0432\u0435\u043b\u0438\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0443\u043b *\/\n        font-size: 16px;\n    }\n    \n    \/* \u0421\u0442\u0438\u043b\u0456 \u0434\u043b\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u0456 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0456\u0432 *\/\n    .result-table {\n        width: 100%;\n        border-collapse: collapse;\n        margin-top: 20px;\n        font-family: Arial, sans-serif;\n    }\n    \n    .result-table thead {\n        background-color: #0B638B;\n        color: white;\n    }\n    \n    .result-table th, .result-table td {\n        border: 1px solid #ddd;\n        padding: 3px;\n        text-align: center;\n        font-size: 14px;\n    }\n    \n    .result-table tbody tr:nth-child(even) {\n        background-color: #f2f8fc;\n    }\n    \n    .result-table tbody tr:nth-child(odd) {\n        background-color: white;\n    }\n    \n    .result-table tbody tr:hover {\n        background-color: #cce7f5;\n        transition: 0.3s ease-in-out;\n    }\n    \n    \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0456 \u0441\u0442\u0438\u043b\u0456 \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n    @media (max-width: 768px) {\n        .result-table {\n            font-size: 12px;\n        }\n    \n        .result-table th, .result-table td {\n            padding: 5px;\n            font-size: 12px;\n        }\n        .formula {\n            font-size: 12px;\n            padding: 3px; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f *\/\n            margin-bottom: 3px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u043c\u0456\u0436 \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u043c\u0438 *\/\n        }\n        .solution-container h2 {\n            font-size: 24px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n        .solution-container h3 {\n            font-size: 20px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n        .solution-container {\n            font-size: 14px; \/* \u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n    }\n    \n    @media (max-width: 480px) {\n        .result-table {\n            font-size: 8px;\n        }\n    \n        .result-table th, .result-table td {\n            padding: 1px;\n            font-size: 8px;\n        }\n        .formula {\n            font-size: 8px;\n            padding: 1px; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0439 \u0432\u0456\u0434\u0441\u0442\u0443\u043f *\/\n            margin-bottom: 1px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u043c\u0456\u0436 \u0444\u043e\u0440\u043c\u0443\u043b\u0430\u043c\u0438 *\/\n        }\n        .solution-container h2 {\n            font-size: 20px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n        .solution-container h3 {\n            font-size: 16px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n        .solution-container {\n            font-size: 13px; \/* \u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n    }\n<\/style>\n\n<script>\n    const MQ = MathQuill.getInterface(2);\n    const inputSpan = document.getElementById('inputField');\n    let answerMathField = MQ.MathField(inputSpan, {\n      spaceBehavesLikeTab: true,\n      handlers: {\n        edit: function() {\n          answerMathField.focus();\n        }\n      }\n    });\n\n    function addSymbol(symbol) {\n      answerMathField.write(symbol);\n      answerMathField.focus();\n    }\n\n    \/\/ \u041f\u0440\u0438 \u0432\u0456\u0434\u043f\u0440\u0430\u0432\u0446\u0456 \u0444\u043e\u0440\u043c\u0438, \u0437\u0430\u043f\u0438\u0441\u0443\u0454\u043c\u043e \u0432\u043c\u0456\u0441\u0442 MathField \u0443 \u0432\u0456\u0434\u043f\u043e\u0432\u0456\u0434\u043d\u0435 \u043f\u043e\u043b\u0435 \u0444\u043e\u0440\u043c\u0438\n    document.querySelector('.calculateBtn').addEventListener('click', function() {\n      document.getElementById('latexExpression').value = answerMathField.latex();\n    });\n\n\n\n\n    function calculateIntegral() {\n        var func = answerMathField.latex();\n        var lowLimit = document.getElementById('lower_limit');\n        var uppLimit = document.getElementById('upper_limit');\n        var numPartitions = document.getElementById('num_partitions');\n        var methodType = document.getElementById('type');\n\n        \/\/ \u0406\u043d\u0456\u0446\u0456\u0430\u043b\u0456\u0437\u0430\u0446\u0456\u044f \u0434\u0432\u043e\u0432\u0438\u043c\u0456\u0440\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0438\u0432\u0443 \u0434\u043b\u044f \u0437\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0445 \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447\u0435\u043c \u0434\u0430\u043d\u0438\u0445\n        var enteredData = [];\n        \/\/ \u0414\u043e\u0434\u0430\u0432\u0430\u043d\u043d\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044f \u0434\u043e \u0434\u0432\u043e\u0432\u0438\u043c\u0456\u0440\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0438\u0432\u0443\n        enteredData.push(func || '');\n        enteredData.push(parseFloat(lowLimit.value) || 0);\n        enteredData.push(parseFloat(uppLimit.value) || 0);\n        enteredData.push(parseFloat(numPartitions.value) || 0);\n        enteredData.push(parseFloat(methodType.value) || 0);\n        \n        sendDataToServer(enteredData);\n        \n        transferX = document.getElementById(\"X\");\n        transferY = document.getElementById(\"Y\");\n        size = document.getElementById(\"SIZE\");\n        transferX.value = 0;\n        transferY.value = 0;\n        size.value = 0;\n    }\n    \n\n\nfunction drawGraphAndRectangles(graphData, rectanglesData) {\n    const svgWidth = 700; \/\/ Total width of the SVG\n    const svgHeight = 400; \/\/ Total height of the SVG\n    const margin = { top: 20, right: 20, bottom: 30, left: 50 };\n\n    \/\/ Adjust the actual drawing area width and height by subtracting margins\n    const width = svgWidth - margin.left - margin.right;\n    const height = svgHeight - margin.top - margin.bottom;\n\n    let formattedGraphData = convertDataForSVG(graphData);\n    let formattedRectanglesData = convertRectanglesForSVG(rectanglesData);\n\n    const xMin= d3.min(formattedGraphData, d => d.x);\n    const xMax = d3.max(formattedGraphData, d => d.x);\n    let yMin = d3.min(formattedGraphData, d => d.y);\n    yMin = yMin > 0 ? 0 : yMin;  \/\/ Set yMin to 0 if yMin > 0\n    let yMax = d3.max(formattedGraphData, d => d.y);\n    yMax = yMax < 0 ? 0 : yMax;  \/\/ Set yMax to 0 if yMax < 0\n\n    \/\/ Clear and set up the SVG element\n    const svg = d3.select(\"#graph-svg\")\n        .html(\"\") \/\/ Clear previous contents\n        .attr(\"width\", svgWidth)\n        .attr(\"height\", svgHeight)\n        .append(\"g\")\n        .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n    \/\/ Define scales for the axes\n    const xScale = d3.scaleLinear()\n        .domain([xMin, xMax])\n        .range([0, width]);\n\n    const yScale = d3.scaleLinear()\n        .domain([yMin, yMax])\n        .range([height, 0]);\n\n    \/\/ Append the axes\n    svg.append(\"g\")\n        .attr(\"transform\", `translate(0,${height})`)\n        .call(d3.axisBottom(xScale))\n        .selectAll(\"path, line\")\n        .attr(\"stroke\", \"#E8E8E8\");\n\n    svg.append(\"g\")\n        .call(d3.axisLeft(yScale))\n        .selectAll(\"path, line\")\n        .attr(\"stroke\", \"#E8E8E8\");\n\n    \/\/ Add grid lines\n    svg.append(\"g\")\n        .attr(\"class\", \"grid\")\n        .call(\n            d3.axisLeft(yScale)\n                .tickSize(-width)\n                .tickFormat(\"\")\n                .ticks(10)\n        )\n        .selectAll(\"line\")\n        .attr(\"stroke\", \"#E8E8E8\")\n        .attr(\"stroke-opacity\", 1)\n        .filter((d, i, nodes) => d !== yMax)\n        .attr(\"stroke-dasharray\", \"\");\n\n    svg.selectAll(\".domain\")\n        .attr(\"stroke\", \"#E8E8E8\");    \n\n    \/\/ Define the area between the graph and the OX axis\n    const area = d3.area()\n        .x(d => xScale(d.x))\n        .y0(yScale(0)) \/\/ Set the OX axis at y=0\n        .y1(d => yScale(d.y));\n\n    \/\/ Append the filled area (95% transparent)\n    svg.append(\"path\")\n        .datum(formattedGraphData)\n        .attr(\"fill\", \"#0b638b\") \/\/ Color of the fill\n        .attr(\"fill-opacity\", 0.05) \/\/ 95% transparent\n        .attr(\"d\", area);\n\n    \/\/ Define the line generator for the graph\n    const line = d3.line()\n        .x(d => xScale(d.x))\n        .y(d => yScale(d.y));\n\n    \/\/ Append the line graph\n    svg.append(\"path\")\n        .datum(formattedGraphData)\n        .attr(\"fill\", \"none\")\n        .attr(\"stroke\", \"#0b638b\") \/\/ Graph line color\n        .attr(\"stroke-width\", 3) \/\/ Graph thickness set to 3\n        .attr(\"d\", line);\n\n    \/\/ Draw red rectangles with 95% transparency and red border\n    svg.selectAll(\".rect\")\n        .data(formattedRectanglesData)\n        .enter()\n        .append(\"rect\")\n        .attr(\"x\", d => xScale(d.x))\n        .attr(\"y\", d => yScale(d.y >= 0 ? d.y : 0))  \/\/ If y is negative, position starts at 0 (OX axis)\n        .attr(\"width\", d => xScale(d.x + d.width) - xScale(d.x)) \/\/ Correct width scaling\n        .attr(\"height\", d => Math.abs(yScale(d.y) - yScale(0))) \/\/ Correct height scaling\n        .attr(\"fill\", \"rgba(255, 0, 0, 0.05)\")  \/\/ Red fill with 95% transparency\n        .attr(\"stroke\", \"#FF0000\") \/\/ Red border\n        .attr(\"stroke-width\", 0.1);  \/\/ Border thickness\n\n    \/\/ Add the vertical dotted line and point display functionality\n    const focusLine = svg.append(\"line\")\n        .attr(\"stroke\", \"gray\")\n        .attr(\"stroke-dasharray\", \"3,3\")\n        .attr(\"y1\", 0)\n        .attr(\"y2\", height)\n        .style(\"display\", \"none\");\n\n    const focusCircle = svg.append(\"circle\")\n        .attr(\"r\", 4)\n        .attr(\"fill\", \"#0b638b\")\n        .style(\"display\", \"none\");\n\n    const focusText = svg.append(\"text\")\n        .attr(\"fill\", \"#333\")\n        .style(\"display\", \"none\");\n\n    \/\/ Track mouse movements over the graph\n    svg.append(\"rect\")\n        .attr(\"width\", width)\n        .attr(\"height\", height)\n        .attr(\"fill\", \"none\")\n        .attr(\"pointer-events\", \"all\")\n        .on(\"mousemove\", mousemove)\n        .on(\"mouseout\", () => {\n            focusLine.style(\"display\", \"none\");\n            focusCircle.style(\"display\", \"none\");\n            focusText.style(\"display\", \"none\");\n        });\n\n    function mousemove(event) {\n    const [mouseX] = d3.pointer(event);\n    const xValue = xScale.invert(mouseX);\n\n    \/\/ Ensure the xValue is within the bounds of the data range\n    if (xValue < xMin || xValue > xMax) {\n        focusLine.style(\"display\", \"none\");\n        focusCircle.style(\"display\", \"none\");\n        focusText.style(\"display\", \"none\");\n        return; \/\/ Stop further processing if out of bounds\n    }\n\n    \/\/ Find the closest point in the graphData to the mouse x position\n    const closestPoint = formattedGraphData.reduce((prev, curr) =>\n        Math.abs(curr.x - xValue) < Math.abs(prev.x - xValue) ? curr : prev\n    );\n\n    const xPos = xScale(closestPoint.x);\n    const yPos = yScale(closestPoint.y);\n\n    \/\/ Ensure the yPos is within the visible bounds of the graph\n    if (yPos < 0 || yPos > height) {\n        focusLine.style(\"display\", \"none\");\n        focusCircle.style(\"display\", \"none\");\n        focusText.style(\"display\", \"none\");\n        return;\n    }\n\n    \/\/ Display the vertical dashed line\n    focusLine\n        .attr(\"x1\", xPos)\n        .attr(\"x2\", xPos)\n        .attr(\"stroke-dasharray\", \"1,3\") \/\/ Change from dotted to dashed (longer dashes)\n        .style(\"display\", null);\n\n    \/\/ Display the point circle\n    focusCircle\n        .attr(\"cx\", xPos)\n        .attr(\"cy\", yPos)\n        .style(\"display\", null);\n\n    \/\/ Position the text, adjusting if it's near the edges of the SVG\n    const textPadding = 10;\n    let textX = xPos + textPadding;\n    let textY = yPos - textPadding;\n\n    \/\/ Adjust if the text goes beyond the right edge of the SVG\n    if (xPos + 100 > width) {\n        textX = xPos - 100; \/\/ Move text to the left of the point\n    }\n\n    \/\/ Adjust if the text goes beyond the top edge of the SVG\n    if (yPos - 20 < 0) {\n        textY = yPos + textPadding; \/\/ Move text below the point\n    }\n\n    \/\/ Display the x, y values near the point with Times New Roman font, size 12\n    focusText\n        .attr(\"x\", textX)\n        .attr(\"y\", textY)\n        .text(`x: ${closestPoint.x.toFixed(2)}, y: ${closestPoint.y.toFixed(2)}`)\n        .attr(\"font-size\", 10) \/\/ Set font size to 12\n        .style(\"display\", null);\n    }\n}\n\n\/\/ Helper function to convert server data to {x, y} format\nfunction convertDataForSVG(graphData) {\n    return graphData.map(point => ({ x: point[0], y: point[1] }));\n}\n\n\/\/ Helper function to convert rectangles for SVG\nfunction convertRectanglesForSVG(rectanglesData) {\n    return rectanglesData.map(rect => {\n        return {\n            x: rect[0],  \/\/ x is the starting position\n            width: rect[1] - rect[0],  \/\/ width = x2 - x1\n            y: rect[2]  \/\/ y position (height of rectangle)\n        };\n    });\n}\n\n\/\/-------------------------------------------------------------\n    \n    function renderMathJax() {\n        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n    }\n    \n    function sendDataToServer(enteredData) {\n        var loading = document.getElementById('loading');\n        var resultC = document.getElementById('fcontainer');\n        var resultCalc = document.getElementById('calculation-results');\n        var errorBlock = document.getElementById('error-block'); \/\/ \u0411\u043b\u043e\u043a \u0434\u043b\u044f \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u044c \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0438\n        \n        resultC.innerHTML = '';\n        errorBlock.classList.remove('show'); \/\/ \u041f\u0440\u0438\u0445\u043e\u0432\u0443\u0454\u043c\u043e \u0431\u043b\u043e\u043a \u043f\u043e\u043c\u0438\u043b\u043e\u043a \u043f\u0435\u0440\u0435\u0434 \u043f\u043e\u0447\u0430\u0442\u043a\u043e\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u0430\u043f\u0438\u0442\u0443\n        errorBlock.innerHTML = ''; \n        \n        \/\/var generateButton = document.getElementById(\"generate-button\");\n        \n        \/\/if (generateButton.disabled) {\n        \/\/    return; \/\/ \u0417\u0430\u043f\u043e\u0431\u0456\u0433\u0430\u0439\u0442\u0435 \u0431\u0430\u0433\u0430\u0442\u043e\u0440\u0430\u0437\u043e\u0432\u0438\u043c \u043d\u0430\u0442\u0438\u0441\u043a\u0430\u043d\u043d\u044f\u043c \u043f\u0456\u0434 \u0447\u0430\u0441 \u0441\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u0432\u043c\u0456\u0441\u0442\u0443\n        \/\/}\n        \n        \/\/generateButton.disabled = true;\n    \n        loading.style.display = 'block';\n        resultCalc.style.display = 'none';\n    \n        var formData = new FormData();\n        formData.append('action', 'integration_by_rectangles_method');\n        formData.append('enteredData', JSON.stringify(enteredData));\n\n        fetch('\/en\/wp-admin\/admin-ajax.php', {\n            method: 'POST',\n            body: formData\n        })\n        .then(response => {\n           if (!response.ok) {\n                throw new Error('Network response was not ok');\n            }\n            return response.json();\n        })\n        .then(data => {\n            loading.style.display = 'none';\n            if (data.success) {\n                if (Array.isArray(data.integral)) {\n                    const messages = [\n    \"Your Result is Ready! Here is the Approximate Value of the Definite Integral Calculated Using the Rectangle Method\",\n    \"That's It! You've Got the Definite Integral Calculation Result in Just a Few Seconds\",\n    \"Result on Screen: The Integral is Calculated! View the Value and Graph Right Now\",\n    \"Done! Your Integral is Successfully Calculated Online \u2013 Check the Result and Graph\",\n    \"Definite Integral Calculation Results: Here's What Our Online Calculator Shows!\"\n  ];\n                    const randomIndex = Math.floor(Math.random() * messages.length);\n                    resultC.innerHTML += '<h2><center>' + messages[randomIndex] + '<\/center><\/h2><svg id=\"graph-svg\" width=\"800\" height=\"400\"><\/svg>';\n                    \n                    for (let i = 0; i < data.integral[1].length; i++) {\n                        if (data.integral[2][i]) {\n                            resultC.innerHTML += data.integral[2][i];\n                        }\n                        resultC.innerHTML += '<div class=\"formula\">' + data.integral[1][i] + '<\/div>';\n                    }\n                    \n                    var lowLimit = document.getElementById('lower_limit');\n                    var uppLimit = document.getElementById('upper_limit');\n                    \n                    drawGraphAndRectangles(data.integral[3][\"graph\"], data.integral[3][\"rectangles\"]);\n                } else {\n                    resultC.innerHTML += '<div class=\"formula\">' + data.integral + '<\/div>';\n                }\n                renderMathJax();\n                resultCalc.style.display = 'block';\n            } else {\n                showError(data.error);\n            }\n        })\n        .catch(error => {\n            loading.style.display = 'none';\n            showError(error.message); \/\/ \u0412\u0438\u043a\u043b\u0438\u043a \u0444\u0443\u043d\u043a\u0446\u0456\u0457 \u0434\u043b\u044f \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u043e\u043c\u0438\u043b\u043a\u0438\n        });\n    }\n    \/\/ \u0424\u0443\u043d\u043a\u0446\u0456\u044f \u0434\u043b\u044f \u0432\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443\n    function showError(message) {\n        var errorBlock = document.getElementById('error-block');\n        errorBlock.textContent = message;\n        errorBlock.classList.add('show'); \/\/ \u0412\u0456\u0434\u043e\u0431\u0440\u0430\u0436\u0430\u0454\u043c\u043e \u0431\u043b\u043e\u043a \u0437 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f\u043c \u043f\u0440\u043e \u043f\u043e\u043c\u0438\u043b\u043a\u0443\n    }\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4916856 elementor-widget elementor-widget-html\" data-id=\"4916856\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"h2-title2\">What\u2019s the Secret Behind the Rectangle Method Calculator? Let\u2019s Break It Down!<\/h2>\n<img decoding=\"async\" class=\"aligncenter wp-image-10020256 size-full\" src=\"https:\/\/www.mathros.net.ua\/en\/wp-content\/uploads\/2024\/09\/rectangle-method-calculator.jpg\" alt=\"rectangle method calculator, rectangular rule integration calculator, rectangular approximation method calculator\" width=\"150\" height=\"150\" \/>\n<p class=\"calculator-p\">The <strong><a title=\"Rectangular Rule\" href=\"https:\/\/www.mathros.net.ua\/en\/rectangular-rule.html\">rectangle method<\/a> calculator<\/strong> is a convenient tool for calculating the approximate value of a definite integral. It works by dividing the area under the curve of a function into rectangles. The width of each rectangle depends on the step size you choose. <strong>The smaller the step size<\/strong>, the more rectangles are used, which leads to a more precise result. After that, the area of each rectangle is added up, giving us the approximate value of the <a title=\"Integral\" href=\"https:\/\/en.wikipedia.org\/wiki\/Integral\" target=\"_blank\" rel=\"nofollow noopener\">integral<\/a>.<\/p>\n<p class=\"calculator-p\">So, how does this process look from a user's perspective? <strong>You simply enter the function<\/strong>, set the integration limits, and choose the desired step size in the calculator. Once you hit the calculate button, the calculator instantly provides the result. Along with the numerical value of the integral, you will also see a graph that illustrates how the area under the curve is calculated.<\/p>\n<p class=\"calculator-p\">Why is this useful? The online calculator <strong>greatly simplifies working with integrals<\/strong>, saving you time and effort. It\u2019s especially helpful for students, teachers, or anyone who regularly deals with mathematical calculations. The graph not only shows you the result but also allows you to <strong>verify its accuracy<\/strong> visually.<\/p>\n<style>\n    .h2-title2 {\n        text-align: center; \/* \u0426\u0435\u043d\u0442\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n        color: gray; \/* \u0417\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0441\u0456\u0440\u043e\u0433\u043e \u043a\u043e\u043b\u044c\u043e\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        font-size: 28px; \/* \u0417\u0430\u043b\u0438\u0448\u0430\u0454\u043c\u043e \u0440\u043e\u0437\u043c\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        font-weight: 700; \/* \u0420\u043e\u0431\u0438\u043c\u043e \u0442\u0435\u043a\u0441\u0442 \u0436\u0438\u0440\u043d\u0438\u043c \u0434\u043b\u044f \u0430\u043a\u0446\u0435\u043d\u0442\u0443 *\/\n        line-height: 1.4; \/* \u041a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u0438\u0439 \u043c\u0456\u0436\u0440\u044f\u0434\u043a\u043e\u0432\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b *\/\n        margin-top: 20px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u0432\u0435\u0440\u0445\u0443 \u0434\u043b\u044f \u0433\u0430\u0440\u043c\u043e\u043d\u0456\u0439\u043d\u043e\u0441\u0442\u0456 *\/\n        margin-bottom: 15px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u043d\u0438\u0437\u0443 *\/\n        font-family: 'Arial', sans-serif; \/* \u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 *\/\n        padding: 10px 0; \/* \u0412\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438 \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 *\/\n    }\n\n    .calculator-p {\n        color: gray; \/* \u0417\u0431\u0435\u0440\u0435\u0436\u0435\u043d\u043d\u044f \u0441\u0456\u0440\u043e\u0433\u043e \u043a\u043e\u043b\u044c\u043e\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        text-align: center; \/* \u0412\u0438\u0440\u0456\u0432\u043d\u044e\u0432\u0430\u043d\u043d\u044f \u0442\u0435\u043a\u0441\u0442\u0443 \u043f\u043e \u043b\u0456\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e *\/\n        font-size: 16px; \/* \u0420\u043e\u0437\u043c\u0456\u0440 \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        line-height: 1.6; \/* \u041a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u0438\u0439 \u043c\u0456\u0436\u0440\u044f\u0434\u043a\u043e\u0432\u0438\u0439 \u0456\u043d\u0442\u0435\u0440\u0432\u0430\u043b *\/\n        margin-bottom: 15px; \/* \u0412\u0456\u0434\u0441\u0442\u0443\u043f \u0437\u043d\u0438\u0437\u0443 \u0434\u043b\u044f \u043a\u043e\u0436\u043d\u043e\u0433\u043e \u0430\u0431\u0437\u0430\u0446\u0443 *\/\n        font-family: 'Arial', sans-serif; \/* \u0417\u0440\u0443\u0447\u043d\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 *\/\n        max-width: 800px; \/* \u0428\u0438\u0440\u0438\u043d\u0430 \u0431\u043b\u043e\u043a\u0443 \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u0436\u0435\u043d\u043d\u044f \u0442\u0435\u043a\u0441\u0442\u0443 *\/\n        margin-left: auto; \/* \u0426\u0435\u043d\u0442\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0442\u0435\u043a\u0441\u0442\u0443 \u0432\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0456 \u0431\u043b\u043e\u043a\u0443 *\/\n        margin-right: auto;\n    }\n\n    \/* \u0421\u0442\u0438\u043b\u0456 \u0434\u043b\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f *\/\n    .aligncenter {\n        display: block;\n        margin: 20px auto; \/* \u0426\u0435\u043d\u0442\u0440\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0456 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438 *\/\n        max-width: 100%; \/* \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0456\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043f\u0456\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u0431\u043b\u043e\u043a\u0443 *\/\n        height: auto; \/* \u041f\u0440\u043e\u043f\u043e\u0440\u0446\u0456\u0439\u043d\u0430 \u0432\u0438\u0441\u043e\u0442\u0430 *\/\n    }\n\n    \/* \u0410\u0434\u0430\u043f\u0442\u0430\u0446\u0456\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n    @media (max-width: 768px) {\n        .h2-title2 {\n            font-size: 24px; \/* \u041c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n\n        .calculator-p {\n            font-size: 14px; \/* \u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0442\u0435\u043a\u0441\u0442\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0456\u0432 *\/\n        }\n    }\n\n    @media (max-width: 480px) {\n        .h2-title2 {\n            font-size: 20px; \/* \u0429\u0435 \u043c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0434\u043b\u044f \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0456\u0432 *\/\n        }\n\n        .calculator-p {\n        font-size: 13px; \/* \u0417\u043c\u0435\u043d\u0448\u0435\u043d\u043d\u044f \u0440\u043e\u0437\u043c\u0456\u0440\u0443 \u0434\u043b\u044f \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432 *\/\n        }\n    }\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Want to Calculate a Definite Integral in No Time? Use Our Simple Online Calculator for Fast and Effortless Results! Integrand<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-centered.php","meta":{"footnotes":""},"class_list":["post-482","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/482","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/comments?post=482"}],"version-history":[{"count":121,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/482\/revisions"}],"predecessor-version":[{"id":1898,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/482\/revisions\/1898"}],"wp:attachment":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/media?parent=482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}