{"id":1164,"date":"2025-05-04T14:19:01","date_gmt":"2025-05-04T14:19:01","guid":{"rendered":"https:\/\/www.mathros.net.ua\/ru\/?page_id=1164"},"modified":"2025-05-05T16:55:37","modified_gmt":"2025-05-05T16:55:37","slug":"kalkulyator-drobej","status":"publish","type":"page","link":"https:\/\/www.mathros.net.ua\/ru\/kalkulyator-drobej","title":{"rendered":"\u041e\u043d\u043b\u0430\u0439\u043d \u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0414\u0440\u043e\u0431\u0435\u0439"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1164\" class=\"elementor elementor-1164\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5ece55 e-flex e-con-boxed e-con e-parent\" data-id=\"e5ece55\" 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-9835efc elementor-widget elementor-widget-html\" data-id=\"9835efc\" 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\">\u041d\u0435 \u0423\u0432\u0435\u0440\u0435\u043d, \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u041b\u0438 \u0420\u0435\u0448\u0438\u043b \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0414\u0440\u043e\u0431\u044f\u043c\u0438? \u0412\u0432\u0435\u0434\u0438 \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u041f\u0440\u043e\u0432\u0435\u0440\u044c \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 - \u0412\u0441\u0451 \u0417\u0430\u0439\u043c\u0435\u0442 \u041f\u0430\u0440\u0443 \u0421\u0435\u043a\u0443\u043d\u0434!<\/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-a9e7504 elementor-widget elementor-widget-html\" data-id=\"a9e7504\" 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\n  <!-- \u0411\u043b\u043e\u043a \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0432\u0438\u0440\u0430\u0437\u0443 -->\n  <div class=\"equation-container\">\n    <label for=\"inputField\">\u041e\u043d\u043b\u0430\u0439\u043d \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0440\u043e\u0431\u0435\u0439<\/label>\n    <hr>\n    \n    <!-- \u0412\u0456\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u043a\u043b\u0430\u0432\u0456\u0430\u0442\u0443\u0440\u0430 -->\n    <div class=\"calcKeypad\">\n      <button class=\"padBtn\" onclick=\"addSymbol('x^n')\">x<sup>n<\/sup><\/button>\n      <button class=\"padBtn\" onclick=\"addSymbol('\\\\sqrt{}')\">\u221a<\/button>\n      <button class=\"padBtn\" onclick=\"addSymbol('\\\\cdot')\">\u00b7<\/button>\n      <button class=\"padBtn\" onclick=\"addSymbol('\\\\frac{}{}')\">a\/b<\/button>\n      <button class=\"padBtn\" onclick=\"addSymbol('e^x')\">e<sup>x<\/sup><\/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      <button class=\"padBtn\" onclick=\"addSymbol('(')\">(<\/button>\n      <button class=\"padBtn\" onclick=\"addSymbol(')')\">)<\/button>\n    <\/div>\n    \n    <!-- \u041f\u043e\u043b\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044f LaTeX -->\n    <label for=\"inputField\"><small>\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/small><\/label>\n    <span id=\"inputField\" contenteditable=\"true\" class=\"math-input\" placeholder=\"\\frac{1}{x} + \\frac{2}{x+1}\"><\/span>\n    \n    <!-- \u041a\u043d\u043e\u043f\u043a\u0430 \u043e\u0431\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044f -->\n  <button id=\"generate-button\" onclick=\"calculate()\">\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c<\/button>\n  <\/div>\n<\/div>\n\n<!-- \u0410\u043d\u0456\u043c\u0430\u0446\u0456\u044f \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0435\u043d\u043d\u044f -->\n  <div id=\"loading\" class=\"loader\" style=\"display: none;\"><\/div>\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  <div id=\"error-block\" class=\"error-message\"><\/div>\n  \n  <!-- \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0440\u043e\u0437\u0440\u0430\u0445\u0443\u043d\u043a\u0443 -->\n  <div id=\"calculation-results\" class=\"solution-container\" style=\"display: none;\">\n    <div id=\"fcontainer\" class=\"formula\"><\/div>\n  <\/div>\n  \n  <div id=\"result\" class=\"formula\"><\/div>\n\n<style>\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: rgba(255, 255, 255, 0.2);\n        color: white;\n        border: none;\n        border-radius: 5px;\n        font-size: 16px;\n        cursor: pointer;\n        margin-top: 20px;\n        transition: background-color 0.3s ease;\n    }\n    \n    #generate-button:hover {\n        background-color: rgba(255, 255, 255, 0.4);\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-left: 20px;\n        padding-right: 20px;\n        padding-top: 5px;\n        padding-bottom: 5px;\n        margin-top: 0px;\n        margin-bottom: 0px;\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    \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: 18px;\n    }\n<\/style>\n\n<script>\n    async function calculate() {\n      const latexExpr = answerMathField.latex();\n    \n      const resultC    = document.getElementById('fcontainer');\n      const resultCalc = document.getElementById('calculation-results');\n      const loading    = document.getElementById('loading');\n      const errorBlock = document.getElementById('error-block');\n    \n      const messages = [\n        \"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0413\u043e\u0442\u043e\u0432! \u0412\u043e\u0442 \u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f\",\n        \"\u0412\u043e\u0442 \u0412\u0430\u0448 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442! \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0420\u0430\u0441\u0447\u0451\u0442\u044b\",\n        \"\u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b! \u041e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438\",\n        \"\u0412\u0430\u0448\u0438 \u0414\u0430\u043d\u043d\u044b\u0435 \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b! \u0412\u043e\u0442 \u041e\u0442\u0432\u0435\u0442\",\n        \"\u0412\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0417\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u044b! \u0412\u043e\u0442 \u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f\"\n      ];\n    \n      \/\/ \u0421\u043a\u0438\u0434\u0430\u0454\u043c\u043e \u043f\u043e\u043f\u0435\u0440\u0435\u0434\u043d\u0456\u0439 \u0441\u0442\u0430\u043d\n      errorBlock.classList.remove('show');\n      errorBlock.innerText = '';\n      loading.style.display    = 'block';\n      resultCalc.style.display = 'none';\n      resultC.innerHTML        = '';\n    \n      \/\/ \u041f\u0435\u0440\u0435\u0432\u0456\u0440\u043a\u0430 \u043d\u0430 \u043f\u043e\u0440\u043e\u0436\u043d\u0456\u0439 \u0432\u0432\u0456\u0434\n      if (!latexExpr || latexExpr.trim() === '') {\n        loading.style.display = 'none';\n        showError('Error: Enter an expression in the field!');\n        return;\n      }\n    \n      try {\n        const response = await fetch('https:\/\/latex-calc-api.onrender.com\/evaluate', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application\/json' },\n          body: JSON.stringify({ latex: latexExpr })\n        });\n    \n        console.log('Response status:', response.status);\n        const data = await response.json();\n        console.log('Response JSON:', data);\n    \n        loading.style.display = 'none';\n    \n        if (data.error) {\n          showError('Error: ' + data.error);\n        } else if (data.latex_result) {\n          \/\/ \u0412\u0438\u0432\u043e\u0434\u0438\u043c\u043e \u0432\u0438\u043f\u0430\u0434\u043a\u043e\u0432\u0435 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f\n          const randomIndex = Math.floor(Math.random() * messages.length);\n          resultC.innerHTML = `<h2><center>${messages[randomIndex]}<\/center><\/h2>`;\n    \n          \/\/ \u0412\u0438\u0432\u043e\u0434\u0438\u043c\u043e \u0444\u043e\u0440\u043c\u0443\u043b\u0443 \u0432 LaTeX\n          resultC.innerHTML += `<div class=\"formula\"><center>\\\\(${data.latex_result}\\\\)<\/center><\/div>`;\n    \n          \/\/ \u041f\u043e\u043a\u0430\u0437\u0443\u0454\u043c\u043e \u0431\u043b\u043e\u043a \u0437 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438\n          resultCalc.style.display = 'block';\n    \n          \/\/ \u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043c\u043e \u0447\u0435\u0440\u0435\u0437 MathJax\n          if (window.MathJax && MathJax.typesetPromise) {\n            MathJax.typesetPromise([resultCalc]).catch(err => console.error(err));\n          } else if (window.MathJax && MathJax.Hub) {\n            MathJax.Hub.Queue([\"Typeset\", MathJax.Hub, resultCalc]);\n          }\n        } else {\n          showError('Error: Empty response from the server.');\n        }\n      } catch (err) {\n        loading.style.display = 'none';\n        showError(err);\n      }\n    }\n    \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    document.querySelector('.calculateBtn').addEventListener('click', function() {\n      document.getElementById('latexExpression').value = answerMathField.latex();\n    });\n    \n    \n    function renderMathJax() {\n        MathJax.Hub.Queue([\"Typeset\", MathJax.Hub]);\n    }\n    \n    function showError(message) {\n        var errorBlock = document.getElementById('error-block');\n        errorBlock.textContent = message;\n        errorBlock.classList.add('show');\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-1923b44 elementor-widget elementor-widget-html\" data-id=\"1923b44\" 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\">\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0414\u0440\u043e\u0431\u0435\u0439: \u041a\u0430\u043a \u041e\u043d \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0418 \u041f\u043e\u0447\u0435\u043c\u0443 \u042d\u0442\u043e \u0421\u0430\u043c\u044b\u0439 \u0423\u0434\u043e\u0431\u043d\u044b\u0439 \u0421\u043f\u043e\u0441\u043e\u0431 \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0438?<\/h2>\n<a title=\"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0440\u043e\u0431\u0435\u0439\" href=\"https:\/\/www.mathros.net.ua\/ru\/kalkulyator-drobej.html\"><img decoding=\"async\" class=\"aligncenter wp-image-10020256 size-full\" src=\"https:\/\/www.mathros.net.ua\/ru\/wp-content\/uploads\/2025\/05\/fraction-calculator.jpg\" alt=\"\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0440\u043e\u0431\u0435\u0439\" width=\"150\" height=\"150\" \/><\/a>\n<p class=\"calculator-p\">\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0440\u043e\u0431\u0435\u0439 - \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0439 \u0441 \u0434\u0440\u043e\u0431\u043d\u044b\u043c\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. <strong>\u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438\u043b\u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430\u0445<\/strong>. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435, \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 - \u0438 \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p class=\"calculator-p\">\u0410 \u0435\u0441\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <em>x<\/em>? <strong>\u041d\u0435 \u043f\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0439\u0442\u0435 - \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438<\/strong>. \u041e\u043d \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 <a title=\"\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0430\u043b\u0433\u0435\u0431\u0440\u0430\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0434\u0440\u043e\u0431\u044c\" href=\"https:\/\/uk.wikipedia.org\/wiki\/%D0%90%D0%BB%D0%B3%D0%B5%D0%B1%D1%80%D0%B0%D1%97%D1%87%D0%BD%D0%B8%D0%B9_%D0%B4%D1%80%D1%96%D0%B1\" target=\"_blank\" rel=\"nofollow noopener\">\u0430\u043b\u0433\u0435\u0431\u0440\u0430\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0440\u043e\u0431\u0438<\/a> \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0434\u043e\u043c\u0430\u0448\u043a\u0443 \u0438\u043b\u0438 \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p class=\"calculator-p\"><strong>\u0417\u0430\u0447\u0435\u043c \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442<\/strong>? \u041e\u043d\u043b\u0430\u0439\u043d \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0434\u0440\u043e\u0431\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0431\u0435\u0437 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u0412\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e: \u043e\u0442\u043a\u0440\u044b\u043b, \u0432\u0432\u0435\u043b \u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0436\u0430\u043b \u043a\u043d\u043e\u043f\u043a\u0443 - \u0438 \u0433\u043e\u0442\u043e\u0432\u043e!<\/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>\u041d\u0435 \u0423\u0432\u0435\u0440\u0435\u043d, \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u041b\u0438 \u0420\u0435\u0448\u0438\u043b \u041f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0414\u0440\u043e\u0431\u044f\u043c\u0438? \u0412\u0432\u0435\u0434\u0438 \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438 \u041f\u0440\u043e\u0432\u0435\u0440\u044c \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 &#8212; \u0412\u0441\u0451 \u0417\u0430\u0439\u043c\u0435\u0442 \u041f\u0430\u0440\u0443 \u0421\u0435\u043a\u0443\u043d\u0434! \u041e\u043d\u043b\u0430\u0439\u043d \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440<\/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-1164","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/pages\/1164"}],"collection":[{"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/comments?post=1164"}],"version-history":[{"count":43,"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/pages\/1164\/revisions"}],"predecessor-version":[{"id":1216,"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/pages\/1164\/revisions\/1216"}],"wp:attachment":[{"href":"https:\/\/www.mathros.net.ua\/ru\/wp-json\/wp\/v2\/media?parent=1164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}