{"id":1229,"date":"2020-07-27T02:52:43","date_gmt":"2020-07-27T02:52:43","guid":{"rendered":"http:\/\/quakeadvice.org\/?page_id=1229"},"modified":"2024-10-26T05:43:18","modified_gmt":"2024-10-26T05:43:18","slug":"program-my2","status":"publish","type":"page","link":"http:\/\/quakeadvice.org\/index.php\/code-seismic-design\/malaysia\/program-my2\/","title":{"rendered":"Program MY2 &#8211; Rapid dynamic analysis engine"},"content":{"rendered":"\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <style>\n\t.page-break {\n\t\t\tpage-break-after: always;\n\t\t\tpage-break-inside: avoid;\n\t\t\tclear:both;\n\t\t}\n\t\t.page-break-before {\n\t\t\tpage-break-before: always;\n\t\t\tpage-break-inside: avoid;\n\t\t\tclear:both;\n    }\n    .sticky-col {\n      position: sticky;\n    position: -webkit-sticky;    \n    background-color: white;\n    left: 0px;\n   }\n  .fixedrow {\n      position: sticky;\n    position: -webkit-sticky;    \n    background-color: white;\n    top: 0px;\n    text-align: center;\n  }\n  .fixedrow1 {\n      position: sticky;\n    position: -webkit-sticky;    \n    background-color: white;\n    top: 30px;\n    text-align: center;\n  }\n  .pagesetup2 {\n    width: 1055px;\n  }\n  \n  \n  .bttn {\n  border: none; color: white; cursor: pointer; display:block;}\n\n  .btn {\n  background-color: DodgerBlue;\n  border: none;\n  color: white;\n  width:260px; \n  height:35px;\n  cursor: pointer;\n  font-size: 12px;\n }\n .btn101 {\n  background-color:grey;\n  border: none;\n  color: black;\n  height:35px;\n  cursor: pointer;\n  font-size: 12px;\n }\n \n\/* Darker background on mouse-over *\/\n.btn:hover {\n  background-color: RoyalBlue;\n}\n.btn101:hover {\n  background-color:darkslategrey;\n  color: white;\n}\ntable {\n  border-collapse: collapse;\n }\n button.capitalize {\n  text-transform: capitalize;\n}\n\n\/* for tier 3 *\/\n* {\n  box-sizing: border-box;\n}\n\n\/* Create two equal columns that floats next to each other *\/\n.column {\n  float: left;\n  padding: 10px;\n }\n\n\/* Clear floats after the columns *\/\n.row:after {\n  content: \"\";\n  display: table;\n  clear: both;\n}\n.checkbox-container {margin: 10px 0;}\n.checkbox-item {display: block; margin: 5px 0;}\n.slide-container {display: none;padding: 20px;text-align: center;margin: 20px;}\n .slide-container.active {display: block;}\n .navigation {text-align: center;margin-top: 20px;}\ntable, th, td {\n    border: none !important;\n    border-collapse: collapse;\n}\n<\/style>  \n\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/skeleton\/2.0.4\/skeleton.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n    <script src=\"https:\/\/cdn.plot.ly\/plotly-latest.js\"><\/script>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjax\/2.7.7\/MathJax.js?config=TeX-MML-AM_CHTML\"><\/script>\n    <script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.7.1.min.js\"><\/script>  \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjs\/9.5.0\/math.js\"><\/script> \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/numeric\/1.2.6\/numeric.min.js\"><\/script>\n    <title>QUAKE ADVICE_Seismic Analysis by Generalised Force Method (GFM)<\/title>\n <\/head>\n<body>\n<textarea class=\"code\" rows=\"9\" cols=\"100\" id=\"codeEditor\" spellcheck=\"false\" style=\"display:none\";><\/textarea>\n<p class=\"err\" id=\"errorMessage\"><\/p>\n\n  <div class=\"container\">    \n  <p style=\"color:black;font-size:20px; text-align: center;\"><b><u>Seismic Analysis by Rapid Dynamic Analysis (RDA)<\/u><\/b><\/p>\n  <div id=\"hidee1\" style=\"display: flex; justify-content: center; align-items: center;\"> <iframe width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/KHjs_sXHMKI\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n  <br>\n  <p style=\"color:black;font-size:18px;\"><b>1. Input Parameters:<\/b><\/p>\n  <table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\">\n                 <tr>\n                  <td><b>Specify if the building has any setback or podium features:<\/b><\/td>\n\t\t\t\t  <td style=\"text-align: center;\"><select id=\"vertIrr\" onclick=\"shownext()\" style=\"width:300px;margin-top:0; margin-bottom:0; text-align:center;\">\n\t\t\t\t  <option value=\"0\">Select<\/option>                  \n\t\t\t\t  <option value=\"1\">There is no setback or podium feature<\/option>\n                   <option value=\"2\">Yes, there is setback feature<\/option>\n\t\t\t\t   <option value=\"3\">Yes, there is podium feature<\/option>\n                   <\/select><\/td>\n             <\/tr>    \n           <\/table>\n<div id=\"hideit0\" style=\"display:none;\"><p style=\"color:black;font-size:16px;\"><b>A. Upload the Building&#8217;s Floor Plan (<span style=\"color: blue;\">for the Typical Floor)<\/span>:<\/b><\/p><\/div>\n<div id=\"hideit01\" style=\"display:none;\"><p style=\"color:black;font-size:16px;\"><b>A. Upload the Building&#8217;s Floor Plan (<span style=\"color: blue;\">for the Storey Below the Setback Level)<\/span>:<\/b><\/p><\/div>\n<div id=\"hideit02\" style=\"display:none;\"><p style=\"color:black;font-size:16px;\"><b>A. Upload the Building&#8217;s Floor Plan (<span style=\"color: blue;\">for the Storey Above the Podium Level)<\/span>:<\/b><\/p><\/div>\n<div id=\"hideit1\" style=\"display:none;\">\n<div id=\"image1\" style=\"display:block;\">The dymamic analysis is achieved based on the input of the floorplan of the building (drawn to scale). Please upload floor plan (any image file format) below. \n<p style=\"color:red;\">Note: Any information outside the boundary of the floorplan and any written text within the floorplan need to be removed before uploading the image. Click &#8216;More Info&#8217; button to see an example.<\/p>\n <button style=\"width:140px; float: right;\" class=\"btn101\" id=\"info10\">More Info<\/button>\n            <div id=\"Info10\" style=\"display:none\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/BuildingModel.png?w=600&#038;ssl=1\" style=\"width:800px;border: 1px solid black; margin-left:100px;\"> <\/div><\/div>\n  \n<b>Upload Image File of the Building Floor Plan Here:<\/b> &nbsp;  &nbsp; <input type=\"file\" id=\"fileInput\" onclick=\"open_file()\" name=\"file\" accept=\"image\/*\" \/>\n<div style=\"text-align:center;\"><canvas id=\"canvasInput\" style=\"width:500px;height:auto; margin-left:100px; \"><\/canvas><\/div>\n<div id=\"showbtn\" style=\"text-align:center;display:none;\"><button type=\"button\" style=\"background-color:greenyellow;color:black;width:250px; height:40px;\" id=\"tryIt\">Scan Floor Plan<\/button><\/div>\n<\/div>\n<div id=\"afterScan\" style=\"display:none;\">\n<div style=\"text-align:center;\"><br><canvas id=\"canvasCheck1\" style=\"width:500px;height:auto;\"><\/canvas><\/div>\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\">\n             <tr><td style=\"text-align: center;\"><b>Input Length of the Red Rectangle along X-axis (in m):<\/b><input type=\"text\" id=\"length\" style=\"width:100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td><\/tr>\n             <tr>\n                 <td style=\"text-align: center;\"> <b>Select The Direction of Loading:<\/b>\n                    <select id=\"dir\" onclick=\"showdirper()\" style=\"width:260px; margin-left:100px; margin-top:0; margin-bottom:0; text-align:center;\">\n                   <option value=\"1\">X<\/option>\n                   <option value=\"2\">Y<\/option>\n\t\t\t\t   <option value=\"3\">Apply directional combination<\/option>\n                   <\/select><\/td>\n             <\/tr> \n\t\t\t <tr id=\"dirper\" style=\"display:none;\"><td><b>Input Combination Percentages: &#038;nbsp    <\/b> X-Direction:  <input type=\"text\" id=\"per1\" placeholder=\"100\" style=\"width:100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td>\n\t\t\t <td>Y-Direction:   <input type=\"text\" id=\"per2\" placeholder=\"30\" style=\"width: 100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td>\n\t\t\t <\/tr>\n<\/table>\n<\/div>\n<div id=\"showbtn1\" style=\"display:none;text-align:center;\"><button type=\"button\" id=\"showinp\" style=\"background-color:greenyellow;color:black;width:600px; height:40px;\"><b>Confirm Floor Boundary, Building Length and Direction of Loading<\/b><\/button><\/div>\n<div id=\"inp\" style=\"display:none;text-align:center;\">\n<div style=\"text-align:center;\"><br><canvas id=\"canvasCheck11\" style=\"width:500px;height:auto;\"><\/canvas><\/div>\n <div id=\"hideit2\"><button type=\"button\" onclick=\"open1()\" style=\"background-color:greenyellow;color:black;width:500px; height:40px;\"><b>Confirm Building Dimensions<\/b><\/button><\/div>\n<\/div>\n<div id=\"showit\" style=\"display:none;\"> \n <div id=\"hideit3\"> \n<div style=\"text-align:center;\"><br><canvas id=\"canvasCheck2\" style=\"width:500px;height:auto;\"><\/canvas><\/div>\n<br>Please verify the dimensions of the structural elements provided in the table below. If the displayed dimensions differ from the actual measurements, kindly update the values by specifying the correct information in the &#8216;Make Changes&#8217; column.<br>\n<div style=\"width: 100%; display: flex; background-color: lightgray;border-radius: 10px;\">\n <div id=\"slide-wrapper\" style=\"width: 70%;height: 310px;\"><\/div>\n <div style=\"display: flex; width: 40%; height: 415px; padding: 20px;align-items:center; justify-content:center;\"> \n    <canvas id=\"WallImage1\" style=\"width:180px;height:auto; display:none;\"><\/canvas>\n    <canvas id=\"WallImage2\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <canvas id=\"WallImage3\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <canvas id=\"WallImage4\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <canvas id=\"WallImage5\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n\t<canvas id=\"WallImage6\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <canvas id=\"WallImage7\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n\t<canvas id=\"WallImage8\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n\t<canvas id=\"WallImage9\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <canvas id=\"WallImage10\" style=\"width:180px;height:auto;display:none;\"><\/canvas>\n    <\/div>\n<\/div>\n<div class=\"navigation\">\n  <button id=\"prevBtn\" class=\"btn101\" onclick=\"prevSlide()\">Previous<\/button>\n  <button id=\"nextBtn\" class=\"btn101\" onclick=\"nextSlide()\">Next<\/button>\n<\/div>\n<br>\n  <table id=\"SetbackPodiumWall\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"display:none;\">\n        <tr>\n            <td><b>Specify if any of the wall terminates at the setback or podium level:<\/b><\/td>\n            <td style=\"text-align: center;\">\n                <div id=\"wallSelection\" class=\"checkbox-container\"><\/div>\n            <\/td>\n        <\/tr>    \n    <\/table>\n<br>\n\n\n<button type=\"button\" onclick=\"open2()\" style=\"background-color:greenyellow;color:black;width:500px; height:40px;margin-left:25%;\"><b>Confirm elements &#038; their dimensions<\/b><\/button>\n<\/div>\n<div id=\"inp1\" style=\"display:none;text-align:center;\">\n<div style=\"color:black;font-size:18px; margin-left:50px; \"><b> Select the type of structural system:<\/b><\/div>\n<\/br>\n<div style=\"width: 100%; display: flex;\">\n    <div style=\"width: 60%; height: 310px;\"> \n        <button class=\"bttn\" id=\"type1\" onclick=\"box1()\" style=\"width:300px; height:225px; border:2px solid black;margin-left:25%; padding-left:8px;\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" style=\"width:280px; height:auto;margin-top:10px;\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/Type10-1.png?w=600&#038;ssl=1\">\n        <\/button>\n    <\/div>\n    <div style=\"width: 30%; height: 310px;\"> \n        <button class=\"bttn\" id=\"type3\" onclick=\"box3()\" style=\"width:300px; height:225px; border:2px solid black;padding-left:8px;\">\n            <img data-recalc-dims=\"1\" decoding=\"async\" style=\"width:280px; height:auto;margin-top:10px;\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/Type30-1.png?w=600&#038;ssl=1\">\n        <\/button>\n    <\/div>\n<\/div>\n\t\t<table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\" id=\"showSlab\" style=\"display:none;\">\n              <tr><td style=\"text-align: center;\"><b>Slab Depth (in mm):<\/b><\/td><td style=\"text-align: center;\"><input type=\"text\" id=\"SlabD\" placeholder=\"180\" style=\"width:200px; height:35px; margin-left:100px; margin-top:0; margin-bottom:0;text-align:center;\"><\/td><\/tr>    \n             <tr><td style=\"text-align: center;\"><b>Characteristic Compressive Strength of Concrete (MPa):<\/b><\/td><td style=\"text-align: center;\"><input type=\"text\" id=\"fc\" placeholder=\"50\" style=\"width:200px; height:35px; text-align:center; margin-left:100px;\"><\/td><\/tr>\n     <\/table>\n<div id=\"showBeamA\" style=\"display:none;\">\n<div style=\"clear: both;\"><\/div>\n<div style=\"display: flex;\">\n    <div style=\"flex: 1; padding: 10px;\">\n          <img data-recalc-dims=\"1\" decoding=\"async\" style=\"width:250px; height:auto;margin-top:10px;margin-right:5%;\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/CoupledWall.png?w=600&#038;ssl=1\">\n    <\/div>\n    <div style=\"flex: 1; padding: 10px; text-align:center;\">\n\t<canvas id=\"canvasCheck3\" style=\"width:500px;height:auto;\"><\/canvas>\n    <\/div>\n<\/div>\n\n\n <table id=\"coupledBeamsTable\" cellpadding=\"0\" cellspacing=\"0\" border=\"0px\">\n    <p style=\"color:black;font-size:15px; clear: both;\"><b>Define coupled walls and size of the coupling beams:<\/b><\/p>\n    <tr style=\"text-align: center;\">\n        <td style=\"text-align: center;\"><b>Wall A<\/b><\/td>\n        <td style=\"text-align: center;\"><b>Wall B<\/b><\/td>\n        <td style=\"text-align: center;\"><b>B (mm)<\/b><\/td>\n        <td style=\"text-align: center;\"><b>D (mm)<\/b><\/td>\n\t\t<td style=\"text-align: center;\"><b>Number<\/b><\/td>\n        <td><\/td>\n    <\/tr>\n    <tr style=\"text-align: center;\" id=\"firstRow\">\n        <td style=\"text-align: center;\">\n            <select id=\"wallA\" style=\"width:100px; margin-top:0; margin-bottom:0; text-align:center;\">\n                <option value=\"0\">Select<\/option>\n\t\t\t\t<option value=\"1\">Wall 1<\/option>\n                <option value=\"2\">Wall 2<\/option>\n                <option value=\"3\">Wall 3<\/option>\n                <option value=\"4\">Wall 4<\/option>\n                <option value=\"5\">Wall 5<\/option>\n                <option value=\"6\">Wall 6<\/option>\n                <option value=\"7\">Wall 7<\/option>\n                <option value=\"8\">Wall 8<\/option>\n                <option value=\"9\">Wall 9<\/option>\n                <option value=\"10\">Wall 10<\/option>\t\t\n            <\/select>\n        <\/td>\n        <td style=\"text-align: center;\">\n            <select id=\"wallB\" style=\"width:100px; margin-top:0; margin-bottom:0; text-align:center;\">\n                <option value=\"0\">Select<\/option>\n\t\t\t\t<option value=\"1\">Wall 1<\/option>\n                <option value=\"2\">Wall 2<\/option>\n                <option value=\"3\">Wall 3<\/option>\n                <option value=\"4\">Wall 4<\/option>\n                <option value=\"5\">Wall 5<\/option>\n                <option value=\"6\">Wall 6<\/option>\n                <option value=\"7\">Wall 7<\/option>\n                <option value=\"8\">Wall 8<\/option>\n                <option value=\"9\">Wall 9<\/option>\n                <option value=\"10\">Wall 10<\/option>\t\n            <\/select>\n        <\/td>\n        <td><input id=\"Bwid\" type=\"number\" step=\"any\" placeholder=\"500\" style=\"width: 150px;\"><\/td>\n        <td><input id=\"Bdep\" type=\"number\" step=\"any\" placeholder=\"700\" style=\"width: 150px;\"><\/td>\n\t\t<td><input id=\"NBeam\" type=\"number\" step=\"any\" placeholder=\"1\" style=\"width: 150px;\"><\/td>\n\t\t<td><button id=\"ENTER\" class=\"btn\" style=\"width:125px;\" onclick=\"EnterCoupling()\">CONFIRM<\/button><\/td>\n        <td><button id=\"ADD\" class=\"btn\" style=\"width:100px; display:none;\" onclick=\"addRow()\">ADD<\/button><\/td>\n    <\/tr>\n<\/table>\n\n\t<table id=\"hidE2\" style=\"display: none;\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\"><thead><tr><td style=\"border: 1px solid black;text-align: center;\">&nbsp;Wall A<\/td><td style=\"border: 1px solid black;text-align: center;\">Wall B<\/td><td style=\"border: 1px solid black;text-align: center;\">B (mm)<\/td><td style=\"border: 1px solid black;text-align: center;\">D (mm)&nbsp;<\/td><\/tr>\n\t<\/thead><tbody id=\"set-val1\" style=\"border: 1px solid black;\"><\/tbody><\/table>\n<\/div>\n\t \n\t <button type=\"button\" onclick=\"open3()\" style=\"background-color:greenyellow;color:black;width:500px; height:40px;margin-left:10%;\"><b>Confirm system type<\/b><\/button>\n\t<\/div> <! div=inp1 close>\n<br>\n<div id=\"showElevation\" style=\"display:none;\">\n  <p style=\"color:black;font-size:16px;\"><b>B. Details of the Building&#8217;s Elevation:<\/b><\/p>\n      <table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\" style=\"width: 850px;\">\n\t           <tr>\n               <td style=\"text-align: center;\"><b>No. of Storeys:<\/b><\/td>\n               <td style=\"text-align: center;\"><input type=\"text\" id=\"storey\" style=\"width:200px; height:35px; text-align:center;margin-left:275px;\"><\/td>\n               <td style=\"text-align: center;\"><button type=\"button\" id=\"submit\" style=\"background-color:greenyellow;color:black;width:105px; height:35px; margin-left:100px;\">Submit<\/button><\/td>\n<\/tr>\n\t\t\t  <\/table>\n\t\t\t  \n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\" id=\"SetbackPodiumLvl\" style=\"display:none;\">\n\t\t\t   <tr>\n               <td style=\"width:400px;\"><b>Storey of Setback or Podium Level:<\/b><\/td>\n               <td style=\"text-align: center;\"><input type=\"text\" id=\"storeySP\" style=\"width:200px; height:35px; text-align:center;\"><\/td>\n               <\/tr>\n              <\/table>\n  <div id=\"showsubmit\" style=\"display: none;\">\n   <div id=\"hide1\">\n      <table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\">\n\t           <tr>\n\t\t\t   <td> <b>Define Seismic Mass:<\/b>\n                    <select id=\"MassOption\" onchange=\"showMassOption()\" style=\"width:260px; margin-left:100px; margin-top:0; margin-bottom:0; text-align:center;\">\n                   <option value=\"1\">By default<\/option>\n                   <option value=\"2\">From weight density<\/option>\n\t\t\t\t   <option value=\"3\">User defined<\/option>\n                   <\/select><\/td>\n\t\t\t\t   <\/tr>\n              <\/table>\n\t\t\t  <table cellpadding=\"0\" cellspacing=\"0\" border=\"0px\" id=\"MassOption2\" style=\"display:none\">\n\t           <tr>\n               <td style=\"width:400px;\"><b>Dead Load Density (kN\/m<sup>3<\/sup>):<\/b><\/td>\n               <td style=\"text-align: center;\"><input type=\"text\" id=\"G\" placeholder=\"4\" style=\"width:250px; height:35px; text-align:center;\"><\/td>\n               <\/tr>\n\t\t\t   <tr>\n               <td style=\"width:400px;\"><b>Floor Live Load Rating (kPa):<\/b><\/td>\n               <td style=\"text-align: center;\"><input type=\"text\" id=\"Q\" placeholder=\"2.5\" style=\"width:250px; height:35px; text-align:center;\"><\/td>\n               <td><button type=\"button\" id=\"submitMass2\" style=\"background-color:greenyellow;color:black;width:200px; height:35px; float: right; margin-right:100px;\">Update Storey Mass<\/button><\/td>\n\t\t\t   \n\t\t\t   <\/tr>\n              <\/table>\n        <button style=\"width:140px; float: right;\" class=\"btn101\" id=\"info1\">More Info<\/button>\n      <div id=\"note1\" style=\"display:none\">  \n    <br>Note:<br>\n      <ol>\n\t    <li>Please provide input for storey mass and height of the roof on the first row and follow the descending pattern up to the base.<\/li>\n        <li>Default floor seismic mass is calculated from the seismic weight density of 2.75 tonnes\/m<sup>3<\/sup><\/li>\n\t\t<li>Default storey height with uniform floor to floor height of 3.2 m is used.<\/li>\n\t\t<li>For user defined mass and height, the table can be filled manually or by performing a copy (CTRL+C) and paste (CTRL+V) of data from an Excel spreadsheet.<\/li>\n        <\/ol><br>\n      <\/div> <!div note1 close>\n    <div style=\"overflow-y:auto; width:500px; height:415px; margin-left:0px;\">\n\t<div id=\"SetbackPodiumInfo\" style=\"display:none; width:450px;background-color: lightgrey; border: 2px solid yellow; text-align: center; padding: 10px;\">The mass for the storey above the setback or podium level must be adjusted to reflect changes in the floor area.<\/div>\n    <table id=\"myTable\">    \n        <thead>\n            <tr>\n                <td class=\"fixedrow\">Storey No.<\/td>\n                <td class=\"fixedrow\">Mass <br>(tonnes)<\/td>\n                <td class=\"fixedrow\">Height above Ground<br> (m)<\/td>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"tableBody\">\n            <!-- Table rows will be inserted here -->\n        <\/tbody>\n    <\/table>\n\t<\/div>\n<br>\n<\/div> <!div hide1 close>\n<br>\n<p style=\"color:black;font-size:16px;\"><b>C. Define Code Elastic Seismic Response Spectrum:<\/b><\/p>\n<div id=\"myTABLEInfo\" style=\"width:500px;background-color: lightgrey; border: 2px solid yellow; text-align: center; padding: 10px;\">Copy and paste or manually fill the code Response Spectral Acceleration (RSA) in &#8216;g&#8217; for different periods. RSA is often represented as &#8220;k<sub>p<\/sub> Z C<sub>h<\/sub>(T<sub>1<\/sub>) in AS1170.4, S<sub>e<\/sub>(T) in EC8, and S<sub>a<\/sub>(T) in ASCE 7&#8243;.<br><\/div>\n\n        <div id=\"myTABLE\" style=\"overflow-y:auto; width:500px; height:415px; margin-left:0px;\">\n     <table id=\"myTable\">         \n          <tr>\n            <td class=\"fixedrow\">Period  <br>(s)<\/td>\n            <td class=\"fixedrow\">RSA <br>in &#8216;g&#8217;<\/td>\n            <\/tr> \n            <tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n               <tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n\t\t\t\t <tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n\t\t\t\t<tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n\t\t\t\t<tr>\n                 <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n                  <td><input type=\"text\" name=\"Tperiod\" style=\"width:80px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <td><input type=\"text\" name=\"RSA_T\" style=\"width:150px;margin-top:0; margin-bottom:0; text-align:center;border: 2px solid yellow;\"><\/td>\n                 <\/tr>\n                <tr>\n    <\/table>\n   <\/div>\n \n  \n  \n  \n  \n  \n  \n  \n<div id=\"show1\" style=\"display:none\">\n  <p style=\"text-align: center;\"><b>(The input storey mass and storey height above ground are shown in Table 2.)<\/b><\/p>\n<\/div> <!div show1 close>\n<br>\n<div id=\"hide11\"> \n<button type=\"button\" onclick=\"refreshinputs();\" class=\"btn\" style=\"background-color:darkred;color:white;width:150px; height:35px; float: right;\">Reset inputs<\/button>\n<button type=\"button\" style=\"background-color:rgb(118, 109, 240);color:black;width:175px; height:40px;\" id=\"check\">Check inputs<\/button><br>\n<button type=\"button\" style=\"background-color:greenyellow;color:black;width:200px; height:40px;\" id=\"gfmanalysis\"><b>Get output results<\/b><\/button>\n<\/div><!div hide11 close>  \n<\/div> <!div show elevation close>\n<\/div>\n<h1 style='page-break-before: always;'><\/h1> \n <!third page break>\t\n<div id=\"show_output\" style=\"display: none;\">\n  <p style=\"color:black;font-size:18px;\"><b>2. Results:<\/b><\/p>\n<p style=\"color:black;font-size:16px\"><b>2.1 2D Dynamic Solution Including Higher Modes of Vibration:<\/b><\/p>\n<div id=\"ShowInReportOnly\" style=\"display: none;\">\nThe dynamic solution of the seismic response of the building in 2-dimension (no torsion or rotation) is determined as per the following 3 steps.\n<br><br><b>Step 1. Determination of the mode shape (\u03d5<sub>j<\/sub>), modal period (T<sub>j<\/sub>) and participation factor (&#038;#915<sub>j<\/sub>) of the first 3 modes of vibration:<\/b>\n<br>The normalised mode shape, modal period, and the participitation factor for the first mode of vibration of the building is determined using the free undamped response of the Timoshenko Beam Model as shown in Eqs.(1-3), respectively.\n$$ {\u03d5_{j=1}(x) = Ax^2 +(1-A)x^3}\\tag{1a}$$\n$$ {A = 0.00007p^3+0.0006p^2-0.0095p-0.5}\\tag{1b}$$\n$${T_{j=1} = \\left(\\frac{2\\pi}{B}\\right) \\times \\sqrt{{\\frac{M_{total}H^3}{(1+p^2)EI}}}}\\tag{2a}$$\n$$ {B = (0.36p^4-2.93p^3+6.43p^2-0.57p+187.55)\/100}\\tag{2b}$$\n$$ {\\Gamma_{j} = \\frac{\\sum^n_{i=1} (m_{i} \u03d5_{j})}{\\sum^n_{i=1}(m_{i} \u03d5^2_{j})}}\\tag{3}$$\nwhere: <i>p<\/i> is the square root of the shear to flexural stiffness ratio calculated from the system type defined as an input; and <i>M<sub>total<\/sub><\/i>, <i>H<\/i>, and <i>EI<\/i> are the total mass, height, and flexural rigidity of the building.\n<br><br> For the second and third modes of vibration, the normalised mode shapes are obtained from Table A, and the corresponding periods are calculated by multiplying the first mode period by the period ratios provided in Table B.\n<br>\n<div style=\"text-align: center;margin: 0 auto;\"><b>Table A. Normalised mode shape for the higher modes.<\/b><\/div>\n<table style=\"border: 2px solid black; margin-left:auto;margin-right:auto; border-collapse: collapse;\">\n        <tr><th style=\"padding-left:20px;\">x<\/th><th>1<\/th><th>0.9<\/th><th>0.8<\/th><th>0.7<\/th><th>0.6<\/th><th>0.5<\/th><th>0.4<\/th><th>0.3<\/th><th>0.2<\/th style=\"padding-right:20px;\"><th>0.1<\/th><\/tr>\n        <tr><td style=\"padding-left:20px;\"><b>\u03d5<sub>j=2<\/sub>(x)<\/b><\/td><td>1<\/td><td>0.584<\/td><td>0.121<\/td><td>-0.315<\/td><td>-0.656<\/td><td>-0.856<\/td><td>-0.897<\/td><td>-0.784<\/td><td>-0.557<\/td><td style=\"padding-right:20px;\">-0.271<\/td><\/tr>\n        <tr><td style=\"padding-left:20px;\"><b>\u03d5<sub>j=3<\/sub>(x)<\/b><\/td><td>1<\/td><td>0.240<\/td><td>-0.391<\/td><td>-0.675<\/td><td>-0.510<\/td><td>-0.019<\/td><td>0.503<\/td><td>0.754<\/td><td>0.616<\/td><td style=\"padding-right:20px;\">0.236<\/td><\/tr>\n    <\/table>\n<div style=\"text-align: center;margin: 0 auto;\"><b>Table B. Period ratios.<\/b><\/div>\n<table style=\"border: 2px solid black; margin-left:auto;margin-right:auto; border-collapse: collapse;\">\n        <tr><th style=\"padding-left:20px;\">p<\/th><th>0.1<\/th><th>1<\/th><th>2.5<\/th><th>3.5<\/th><th>4.5<\/th><th>6.0<\/th><th>10<\/th><th style=\"padding-right:20px;\">20<\/th><\/tr>\n        <tr><td style=\"padding-left:20px;\"><b>T<sub>j=2<\/sub>\/T<sub>j=1<\/sub><\/b><\/td><td>0.16<\/td><td>0.18<\/td><td>0.24<\/td><td>0.26<\/td><td>0.28<\/td><td>0.29<\/td><td>0.31<\/td><td style=\"padding-right:20px;\">0.33<\/td><\/tr>\n        <tr><td style=\"padding-left:20px;\"><b>T<sub>j=3<\/sub>\/T<sub>j=1<\/sub><\/b><\/td><td>0.06<\/td><td>0.07<\/td><td>0.09<\/td><td>0.11<\/td><td>0.12<\/td><td>0.14<\/td><td>0.17<\/td><td style=\"padding-right:20px;\">0.19<\/td><\/tr>\n    <\/table>\n\t<h1 style='page-break-before: always;'><\/h1> \n <!third page break>\n<br><br><b>Step 2. Determination of the effective modal mass (M<sub>j<\/sub>) and modal participation ratio (MPR<sub>j<\/sub>)<\/b>\n$$ {M_{j} = \\sum^n_{i=1}({m_{i}}\\:{{&#915;_{j}}\\:\\:{&#981;_{i,j}}})}\\tag{4}$$\n$$ {MPR_{j} = \\frac{M_{j}}{M_{total}}}\\tag{5}$$\n<b>Step 3. Determination of the combined storey and inter-storey drift, storey and base shear, and overturning moment<\/b>\n<br>The combination of storey drift (<i><\/i>&#948;<sub>i,3 modes<\/sub><\/i>), inter-storey drift (<i>&#952;<sub>i,3 modes<\/sub><\/i>), storey shear (<i>V<sub>i,3 modes<\/sub><\/i>), base shear (<i>V<sub>b,3 modes<\/sub><\/i>), and total overturning moment (<i>OM<\/i>) of the first three modes of vibration are calculated using Eqs. (6-11).\n$$ {&#948;_{i,3\\:modes} = \\sqrt{\\sum^3_{j}{\\left({{&#915;_{j}}\\:\\:{&#981;_{i,j}}\\:\\:{RSD_{j}}}\\right)}^2 }}\\tag{6}$$\n$$ {&#952;_{i,3\\:modes} = \\sqrt{\\sum^3_{j}{\\left(\\frac{{{&#915;_{j}}\\:\\:{(&#981;_{i,j}-&#981;_{i-1,j})}\\:\\:{RSD_{j}}}}{h_{i}}\\right)}^2 }}\\tag{7}$$\n$$ {F_{i,3\\:modes} = \\sqrt{\\sum^3_{j}{\\left({m_{i}:\\:{&#915;_{j}}\\:\\:{&#981;_{i,j}}\\:\\:{RSA_{j}}}\\right)}^2 }}\\tag{8}$$\n$$ {V_{i,3\\:modes} = \\sqrt{{\\left(\\sum^n_{i}{m_{i}}\\:{{&#915;_{1}}\\:\\:{&#981;_{i,1}}\\:\\:{RSA_{1}}}\\right)}^2 + {\\left(\\sum^n_{i}{m_{i}}\\:{{&#915;_{2}}\\:\\:{&#981;_{i,2}}\\:\\:{RSA_{2}}}\\right)}^2 + {\\left(\\sum^n_{i}{m_{i}}\\:{{&#915;_{3}}\\:\\:{&#981;_{i,3}}\\:\\:{RSA_{3}}}\\right)}^2}}\\tag{9}$$\n$$ {V_{b,3\\:modes} = \\sqrt{{\\left({V_{b,1}}\\right)}^2+{\\left({V_{b,2}}\\right)}^2+{\\left({V_{b,3}}\\right)}^2}}\\tag{10}$$\n$$ {OM = \\sum^n_{i=1}({{F_{i,3\\:modes}} \\times H_{i}})}\\tag{11}$$\nWhere: <i>RSA<sub>j<\/sub><\/i> and <i>RSD<sub>j<\/sub><\/i> are the spectral acceleration and displacement of mode &#8216;j&#8217; at &#8216;T<sub>j<\/sub>&#8216;, and <i>h<sub>i<\/sub><\/i> and <i>H<sub>i<\/sub><\/i> are the height of each storey &#8216;i&#8217; and it&#8217;s height from the base of the building.\n<br><br>\n<\/div>\n<td style=\"text-align: center;margin: 0 auto;\"><b>Table 1: Effective Modal Mass, Modal Participation Ratio, Effective Stiffness and Natural Period:<\/b><\/td>\n <table style=\"border: 1px solid black; margin-left:auto;margin-right:auto;\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\"><tbody id=\"set-first001P\" style=\"border: 1px solid black;\"><\/tbody><\/table>\n <br>\n <table style=\"border: 1px solid black; margin-left:auto;margin-right:auto;\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\"><thead id=\"set-first1\" style=\"border: 1px solid black;\"><\/thead><tbody id=\"set-val2\" style=\"border: 1px solid black;\"><\/tbody><\/thead><tbody id=\"set-first001\" style=\"border: 1px solid black;\"><\/tbody><\/table>\n   \n<h1 style='page-break-before: always;'><\/h1> <!sixth page break>\n<div id=\"myDiv101\" style=\"width:600px;height:auto;text-align:center;margin: 0 auto;\"><\/div>\n<br>\n<div style=\"color:black;font-size:14px; padding-left : 0px; text-align: center;\"><canvas id=\"buildingCanvas\" width=\"600\" height=\"600\"><\/canvas>\n<div style=\"color:black;font-size:14px; padding-left : 0px; text-align: center;\"><b>Figure 1: Normalised Mode Shape for the First Three Modes of Vibration<\/b><\/div>\n<div id=\"myDiv1\" style=\"width:600px;height:auto;text-align:center;margin: 0 auto;\"><\/div>\n<div  style=\"color:black;font-size:14px; padding-left : 0px; text-align: center;\"><b>Figure 2: GFM Inter-Storey Drift<\/b><\/div>\n<div id=\"myDiv2\" style=\"width:600px;height:auto;text-align:center;margin: 0 auto;\"><\/div>\n<div  style=\"color:black;font-size:14px; padding-left : 0px; text-align: center;\"><b>Figure 3: GFM Storey Shear<\/b><\/div>\n\n<!fifth page break>\n<h1 style='page-break-before: always;'><\/h1>\n<p style=\"color:black;font-size:16px\"><b>2.2 Solution Including 3D Torsional Amplification:<\/b><\/p>\nThe floor plan of the building provided as an input is scanned here to determine the position of the centre of mass (CM) and centre of rigidity (CR) and the mass radius of gyration as shown in Figure 5.\nThen the torsional parameters such as the normalised elastic radius (br) and normalised eccentricity (er) are determined as per <a style=\"style=\"background-color:grey; width:100px;\" href=\"https:\/\/www.mdpi.com\/2673-4109\/2\/2\/16\/pdf\" download target=\"_blank\">[1]<\/a>. Finally, the 3D\/2D displacement ratio is determined as per <a style=\"style=\"background-color:grey; width:100px;\" href=\"https:\/\/www.mdpi.com\/2075-5309\/11\/1\/13\/pdf\" download target=\"_blank\">[2]<\/a>. The torsional parameters and the 3D displacement profile is plotted against the 2D displacement in Figure 5.\n<div style=\"clear: both;\"><\/div><br>\n<div style=\"text-align:center;float: left; width: 45%;\">\n<div id=\"Check3DOriginal\">\n<canvas id=\"canvasOutput\" style=\"width:400px;height:auto;transition: transform 2s ease;\"><\/canvas>\n<canvas id=\"canvasOutput3D\" style=\" display: none;width:400px;height:auto;transition: transform 2s ease;\"><\/canvas>\n<img data-recalc-dims=\"1\" decoding=\"async\" style=\"width:350px; height:auto;margin-top:10px;margin-right:5%;\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/REDDOT.png?w=600&#038;ssl=1\">\n<\/div>\n<canvas id=\"canvasCheck3D\" style=\"width:500px;height:auto; display:none;\"><\/canvas>\n\n<button style=\"width:250px;\" class=\"btn101\" id=\"Show3D\">Change This Specification<\/button>\n<div id=\"change3D\" style=\"display:none;\">\n<table style=\"margin-left:auto;margin-right:auto;\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\">\n             <tr><td><b>Input Position of the Red Dot:<\/b><\/td><\/tr>  \n\t\t\t <tr><td>X-Coordinate:  <input type=\"text\" id=\"XCOR\" placeholder=\"20\" style=\"width:100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td><\/tr>\n\t\t\t <tr><td>Y-Coordinate:   <input type=\"text\" id=\"YCOR\" placeholder=\"20\" style=\"width: 100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td> <\/tr>\n\t\t\t <tr><td>Orientation Angle (degree):   <input type=\"text\" id=\"Angle\" placeholder=\"20\" style=\"width: 100px; height:35px; margin-left:20px; margin-top:0; margin-bottom:0;\"><\/td> <\/tr>\n<\/table>\n<button type=\"button\" onclick=\"update3D()\" style=\"background-color:greenyellow;color:black;width:250px; height:40px;\" id=\"gfm3D\"><b>Get Updated Displacement<\/b><\/button>\n<\/div>\n\n\n<\/div>\n  <div style=\"float: right; width: 45%;\">\n  <table style=\"border: 1px solid black; margin-left:auto;margin-right:auto;\" id=\"mytable10\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\"><tbody id=\"disratio\" style=\"border: 1px solid black;\"><\/tbody><\/table>\n  <img data-recalc-dims=\"1\" decoding=\"async\" id=\"dirpng\" style=\"width:175px; height:auto;margin-top:10px;margin-right:5%; display:none;\" src=\"https:\/\/i0.wp.com\/cdasap.com\/wp-content\/uploads\/2024\/10\/Dir.png?w=600&#038;ssl=1\">\n  <\/div>\n<div style=\"clear: both;\"><\/div>\n <div id=\"3dprofile\" style=\"width:600px;height:auto; text-align:center;margin: 0 auto;\"><\/div>\n <div id=\"3dprofileUpdated\" style=\"width:600px;height:auto; text-align:center;margin: 0 auto;\"><\/div>\n  <div style=\"font-size:14px; text-align:center;\"><b>Figure 4: Summary of the torsional parameters and the comparison of the 2D and 3D displacement profile.<\/b><\/div>\n<!fifth page break: references and disclaimer>\n<h1 style='page-break-before: always;'><\/h1>\n <td style=\"text-align: center;\"><b>Table 2: Summary of input information of the floor mass, height, and GFM results: floor displacements (&#948;<sub>i_GFM<\/sub>), inter-storey drift (&#952;<sub>i_GFM<\/sub>), inertia forces (F<sub>i_GFM<\/sub>), storey shear (V<sub>i_GFM<\/sub>), total base shear, and overturning moment.<\/b><\/td>\n<br><br><div id=\"hideit4\"><button onclick=\"exportTableToExcel('gfm','Seismic Analysis Results')\" style=\"float: right;\"><i class=\"fa fa-download\"><\/i> Export Table<\/button><\/div>\n<table id=\"gfm\" style=\"border: 1px solid black; margin-left:auto;margin-right:auto;\" cellpadding=\"0\" cellspacing=\"0;\" margin=\"0px;\"><thead id=\"set-first\" style=\"border: 1px solid black;\"><\/thead><tbody id=\"set-val\" style=\"border: 1px solid black;\"><\/tbody><tbody id=\"set-val01\" style=\"border: 1px solid black;\"><\/tbody><tbody id=\"set-val0001\" style=\"border: 1px solid black;\"><\/tbody><\/table> \n\n<div id=\"reference\" style=\"display:none;\">\n <div style=\"color:black;font-size:17px;\"><b>4. References:<\/b><\/div>\n<div><a style=\"style=\"background-color:grey; width:100px;\" href=\"https:\/\/www.mdpi.com\/2673-4109\/2\/2\/16\/pdf\" download target=\"_blank\"><i class=\"fa fa-download\"><\/i><\/a> &nbsp; 1. Khatiwada, P.; Lumantarna, E. Simplified Method of Determining Torsional Stability of the Multi-Storey Reinforced Concrete Buildings. <i>CivilEng<\/i> 2021, 2(2), 290-308.<\/div>\n<div><a style=\"style=\"background-color:grey; width:100px;\" href=\"https:\/\/www.mdpi.com\/2075-5309\/11\/1\/13\/pdf\" download target=\"_blank\"><i class=\"fa fa-download\"><\/i><\/a> &nbsp; 2. Khatiwada, P.; Lumantarna, E.; Lam, N.; Looi, D. Fast Checking of Drift Demand in Multi-Storey Buildings with Asymmetry. <i>Buildings<\/i> 2021, 11, 13.<\/div>\n  <div>3. Standard, A. (2007). AS 1170.4-2007 (Amdt 2018).<i>Structural Design Actions, Part 4: Earthquake Actions in Australia.<\/i><\/div>\n<h1 style='page-break-before: always;'><\/h1> <!sixth page break>\n<br> <p style=\"color:black;font-size:18px; padding-left : 0px; text-align: center;\"><b><u>Disclaimer<\/u><\/b><\/p>\n<b>The authors assume no responsibility for any injury, damage, liability, negligence and\/or otherwise to any individual or property from the use or application of any of the methods, products, instructions, or ideas contained in the material herein.<b><br><br>\n\n<div id=\"hide3\">\n<button onclick=\"generatePDF();\" style=\"float: left;\" class=\"btn\"><i class=\"fa fa-download\"><\/i> Download\/Print Report<\/button>\n<\/div>\n<\/div>\n<\/div><!showselectedmode div close>\n<br>\n<br>\n<\/div><!showsubmit div close>\n<\/div><!showoutput close>\n<\/div><!container div close>\n<\/div><!container div close>\n<\/div><!container div close>\n<script>\n      var cx; var cy; var CR_x;    var CR_y; var ecc_y;   var ecc_x; var exr;   var eyr; var br_CRx; var br_CRy; var Br; var rr; var buildingLength; var dim=[]; var disx=[]; var disy=[]; var M_old_x=[]; var M_old_y=[]; var sn=[];\n   var systemType;  var SlabD;\tvar Blength;\tvar BArea; var img; var contours; var ContourBuilding;\n   var xMAX;\tvar xMIN;\tvar yMAX;\tvar yMIN; var floorArea;\n   var maxContourArea; var bottomCenter; var topCenter; var leftCenter; var rightCenter; var wallIds=[]; var imageoutput11; var rect;\nvar dis3d;      var M_Wall_x=[]; var M_Wall_y=[]; var cx_Wall=[];  var cy_Wall=[];\n\t\t var mass= [];\n          var height= [];\n          var displacement= [];\n          var T1;\n          var Teff;\n          var dis; var acc11; var deff; var aeff;\n          var dis_o; var acc22;\n          var RSAmin;\n          var S;\n          var Tss;\n          var Tsss;\n          var TD;\n          var rsa1;\n          var rsa2;      \n          var eff_displacement= [];\n\t\t  var eff_3ddisplacement= [];\n\t\t  var LAMBDA=[]; var THETA=[]; var PF=[];\n\t\t  var periodx; var periody;\n\t\t  var per1; var per2; var RSD1; var RSD2; var RSD3;\nfunction shownext() {   \nif(document.getElementById('vertIrr').value>0){document.getElementById('hideit1').style.display= \"block\";} else{document.getElementById('hideit1').style.display= \"none\";}\nif(document.getElementById('vertIrr').value==1){document.getElementById('hideit0').style.display= \"block\";} else{document.getElementById('hideit0').style.display= \"none\";}\nif(document.getElementById('vertIrr').value==2){document.getElementById('hideit01').style.display= \"block\";} else{document.getElementById('hideit01').style.display= \"none\";}\nif(document.getElementById('vertIrr').value==3){document.getElementById('hideit02').style.display= \"block\";} else{document.getElementById('hideit02').style.display= \"none\";}\nif(document.getElementById('vertIrr').value>1){document.getElementById('SetbackPodiumLvl').style.display= \"block\"; document.getElementById('SetbackPodiumWall').style.display= \"block\"; document.getElementById('SetbackPodiumInfo').style.display= \"block\";} else{document.getElementById('SetbackPodiumLvl').style.display= \"none\";document.getElementById('SetbackPodiumInfo').style.display= \"none\"; document.getElementById('SetbackPodiumWall').style.display= \"none\";}\n}\nfunction showdirper(){  \nif(document.getElementById('dir').value>2){document.getElementById('dirper').style.display= \"block\";} \nelse{document.getElementById('dirper').style.display= \"none\";}\n}\nfunction firstmode(){\n  var selectmode = document.getElementById(\"selectgfm\");\n  selectmode.style.display = \"none\";\n  var showselectedmode = document.getElementById(\"showselectedonly\");\n  showselectedmode.style.display = \"block\";\n    \/\/ need to hide div for combined modes\n  var hidehighermode1 = document.getElementById(\"highermode1\");\n  hidehighermode1.style.display = \"none\";\n  var hidehighermode2 = document.getElementById(\"highermode2\");\n  hidehighermode2.style.display = \"none\";\n  var hidehighermode3 = document.getElementById(\"highermode3\");\n  hidehighermode3.style.display = \"none\";\n  var hidehighermode4 = document.getElementById(\"highermode4\");\n  hidehighermode4.style.display = \"none\";\n  var hidehighermode5 = document.getElementById(\"highermode5\");\n  hidehighermode5.style.display = \"none\";\n}\nfunction first3modes(){\n  var selectmode = document.getElementById(\"selectgfm\");\n  selectmode.style.display = \"none\";\n  var showselectedmode = document.getElementById(\"showselectedonly\");\n  showselectedmode.style.display = \"block\";\n  \/\/ need to hide div for first mode\n  var hidefirstmode1 = document.getElementById(\"firstmode1\");\n  hidefirstmode1.style.display = \"none\";\n  var hidefirstmode2 = document.getElementById(\"firstmode2\");\n  hidefirstmode2.style.display = \"none\";\n  var hidefirstmode3 = document.getElementById(\"firstmode3\");\n  hidefirstmode3.style.display = \"none\";\n  var hidefirstmode4 = document.getElementById(\"firstmode4\");\n  hidefirstmode4.style.display = \"none\";\n  var hidefirstmode0 = document.getElementById(\"firstmode0\");\n  hidefirstmode0.style.display = \"none\";\n}\n\/\/more info button click show hide\ndocument.getElementById(\"submit\").addEventListener(\"click\", function(button) {    \n  if (document.getElementById(\"showsubmit\").style.display === \"none\") \t\t     document.getElementById(\"showsubmit\").style.display = \"block\";\n  else document.getElementById(\"showsubmit\").style.display = \"block\";\n  document.getElementById(\"submit\").style.display = \"none\";\n  document.getElementById(\"storey\").disabled=\"true\";\n  alert(\"Next, review and adjust the automatically generated default values for floor masses and heights. Also, define the seismic demand parameters.\");\nvar n = parseFloat(document.getElementById('storey').value);  \n\t  var length = parseFloat(document.getElementById('length').value);\n\t  var HeightDefault=[];\n      floorArea=maxContourArea*length*length\/(buildingLength*buildingLength);\t \n     \/\/ generate mass and height table based on input of number of storey\n        var tableBody = document.getElementById('tableBody');\n            tableBody.innerHTML = ''; \/\/ Clear existing rows\n            for (var i = n; i >= 1; i--) {\n                var row = document.createElement('tr');\n                \n                var cell1 = document.createElement('td');\n                cell1.className = 'sticky-col';\n                cell1.innerHTML = i; \/\/ Storey number\n                \n                var cell2 = document.createElement('td');\n                var inputMass = document.createElement('input');\n                inputMass.type = 'text';\n                inputMass.name = 'mass';\n                inputMass.style.width = '150px';\n                inputMass.style.border = '2px solid yellow';\n                cell2.appendChild(inputMass);\n                \n                var cell3 = document.createElement('td');\n                var inputHeight = document.createElement('input');\n                inputHeight.type = 'text';\n                inputHeight.name = 'height';\n                inputHeight.style.width = '150px';\n                inputHeight.style.border = '2px solid yellow';\n                cell3.appendChild(inputHeight);\n                \n                row.appendChild(cell1);\n                row.appendChild(cell2);\n                row.appendChild(cell3);\n                \n                tableBody.appendChild(row);\n            }\n        for (var j = n - 1; j >= 0; j--) {\n         HeightDefault.push((3.2*(j + 1)).toFixed(1));\n        } \n       for (var j = 0; j <n; j++) {\n         document.getElementsByName('mass')[j].value = Math.round(0.275 * 3.2 * floorArea);\n          document.getElementsByName('height')[j].value = HeightDefault[j];\n        } \n});\nfunction showMassOption(){\n for (var j = 0; j <parseFloat(document.getElementById('storey').value); j++) {\n var MassOption=parseFloat(document.getElementById('MassOption').value);\n         if(MassOption==1){document.getElementsByName('mass')[j].value = Math.round(0.275 * 3.2 * floorArea);document.getElementById('MassOption2').style.display= \"none\";}\n\t\t if(MassOption==2){document.getElementById('MassOption2').style.display= \"block\";}\n\t\t if(MassOption==3){document.getElementsByName('mass')[j].value = '';document.getElementById('MassOption2').style.display= \"none\";}\n        }\n}\n const btn_submitMass2 = document.getElementById('submitMass2').addEventListener('click', function(e){\n for (var j = 0; j <parseFloat(document.getElementById('storey').value); j++) {\n\t\t document.getElementsByName('mass')[j].value = Math.round((parseFloat(document.getElementById('G').value)+0.3*parseFloat(document.getElementById('Q').value))\/9.81 * 3.2 * floorArea);\n        }\n  }); \n\n\ndocument.getElementById(\"Show3D\").addEventListener(\"click\", function(button) {    \n  document.getElementById(\"Check3DOriginal\").style.display = \"none\";\n  document.getElementById(\"canvasCheck3D\").style.display = \"block\";\n  document.getElementById(\"change3D\").style.display = \"block\";\n  document.getElementById(\"dirpng\").style.display= \"block\";\n  });\n\n\ndocument.getElementById(\"info10\").addEventListener(\"click\", function(button) {    \n  if (document.getElementById(\"Info10\").style.display === \"none\") \t\t     document.getElementById(\"Info10\").style.display = \"block\";\n  else document.getElementById(\"Info10\").style.display = \"none\";\n  });\n\ndocument.getElementById(\"info1\").addEventListener(\"click\", function(button) {    \n  if (document.getElementById(\"note1\").style.display === \"none\") \t\t     document.getElementById(\"note1\").style.display = \"block\";\n  else document.getElementById(\"note1\").style.display = \"none\";\n});\n\/\/default button click show hide \n\n\/\/ code for refresh button\nfunction refreshinputs(){\n  var elements = document.getElementsByTagName('input');\nfor (var i = 0; i < elements.length; i++) {\n    elements[i].value= '';\n  }\n}\n\/\/ end of refresh button work\nvar IB;       var WallA = [];    var WallB = [];    var BWid = [];    var BDep = [];    var NBeam = [];\n\nfunction open3(){  document.getElementById('showElevation').style.display= \"block\";\nper1 = document.getElementById('per1').value; per2 = document.getElementById('per2').value;\nper1 = (per1 !== undefined &#038;&#038; per1 !== \"\") ? per1 : 100; per2 = (per2 !== undefined &#038;&#038; per2 !== \"\") ? per2 : 30;\nalert(\"Next, enter the storey detail and press the submit button.\");\n    var Slabd = document.getElementById('SlabD').value; \n\tif (Slabd === null || Slabd === \"\") { SlabD = 0.18; } else { SlabD = parseFloat(Slabd)\/1000; }\n\t    \n   const table = document.getElementById('coupledBeamsTable');\nconst rows = table.getElementsByTagName('tr');\n\nfor (let i = 1; i < rows.length; i++) {\n    const cells = rows[i].getElementsByTagName('td');\n    \n    \/\/ Wall A (select value)\n    WallA.push(parseFloat(cells[0].getElementsByTagName('select')[0].value));\n    \n    \/\/ Wall B (select value)\n    WallB.push(parseFloat(cells[1].getElementsByTagName('select')[0].value));\n    \n    \/\/ Beam Width (input value)\n    const beamWidthInput = cells[2].getElementsByTagName('input')[0].value;\n    const beamWidthValue = (beamWidthInput === null || beamWidthInput === \"\") ? 500 : parseFloat(beamWidthInput);\n    BWid.push(beamWidthValue);\n    \n    \/\/ Beam Depth (input value)\n    const beamDepthInput = cells[3].getElementsByTagName('input')[0].value;\n    const beamDepthValue = (beamDepthInput === null || beamDepthInput === \"\") ? 700 : parseFloat(beamDepthInput);\n    BDep.push(beamDepthValue);\n    \n    \/\/ Number of Beams (input value)\n    const numBeamsInput = cells[4].getElementsByTagName('input')[0].value;\n    const numBeamsValue = (numBeamsInput === null || numBeamsInput === \"\") ? 1 : parseFloat(numBeamsInput);\n    NBeam.push(numBeamsValue);\n}\n   WallA= WallA.filter(function(e){ return e !== \"0\" &#038;&#038; e !== 0; });\nif (WallB.length > WallA.length) {WallB = WallB.slice(0, WallA.length);}\nif (BWid.length > WallA.length) {BWid = BWid.slice(0, WallA.length);}\nif (BDep.length > WallA.length) {BDep = BDep.slice(0, WallA.length);}\nif (NBeam.length > WallA.length) {NBeam = NBeam.slice(0, WallA.length);}\n \/\/ Arrays with each column's values\n\tIB =0; IwallC=0; BspacinG=0;\n\tfor (i=0;i<BWid.length;i++){\n\tIB+=(BWid[i]*BDep[i]*BDep[i]*BDep[i]+2*BWid[i]*SlabD*SlabD*SlabD*1000000000)*NBeam[i]\/12000000000000;\n      if (document.getElementById('dir').value ==3 &#038;&#038; per1>per2){var Dir=1;}\n\t  if (document.getElementById('dir').value ==3 && per1<per2){Dir=2;}\n\t  if (document.getElementById('dir').value ==1 || Dir==1){\n\t  IwallC+=M_Wall_x[WallA[i]-1]+M_Wall_x[WallB[i]-1];\n\t  BspacinG+=Math.abs(cx_Wall[WallA[i]-1]-cx_Wall[WallB[i]-1]);\n\t  }\n      if (document.getElementById('dir').value ==2 || Dir==2){\n\t  BspacinG+=Math.abs(cy_Wall[WallA[i]-1]-cy_Wall[WallB[i]-1]);\n\t  }\n\t}\n\tBspacinG=BspacinG\/BWid.length;\n}\n\/\/ jquery for copy\/pastable table\n$('input').on('paste', function(e){\n  var $this = $(this);\n  $.each(e.originalEvent.clipboardData.items, function(i, v){\n      if (v.type === 'text\/plain'){\n          v.getAsString(function(text){\n              var x = $this.closest('td').index(),\n                  y = $this.closest('tr').index(),\n                  obj = {};\n              text = text.replace(\/[\\r\\n]+$\/, ''); \/\/ Remove trailing newlines\/carriage returns\n              $.each(text.split('\\r\\n'), function(i2, v2){\n                  $.each(v2.split('\\t'), function(i3, v3){\n                      var row = y + i2, col = x + i3;\n                      obj['cell-' + row + '-' + col] = v3;\n                      \n                      var cell = $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input');\n                      if (cell.length > 0) {\n                          cell.val(v3);\n                      }\n                  });\n              });\n          });\n      }\n  });\n  return false;\n});\n\n\/\/ alternative to .tofixed(n)\nfunction roundTo(n, digits) {\n  if (digits === undefined) {\n      digits = 0;\n  }\n    var multiplicator = Math.pow(10, digits);\n  n = parseFloat((n * multiplicator).toFixed(11));\n  return (Math.round(n) \/ multiplicator).toFixed(2);\n}\n\n\nfunction interp1(x, y, xi) {\n    for (let i = 0; i < x.length - 1; i++) {\n        if (xi >= x[i] && xi <= x[i+1]) {\n\t\t\treturn (y[i] + (y[i+1] - y[i]) * ((xi - x[i]) \/ (x[i+1] - x[i])));\n        }\n\t}\n      \/\/ If xi is outside the bounds of x, return null\n}\nconst btn1 = document.getElementById('check').addEventListener('click', function(e){    \n         var mass1= []; var n = parseFloat(document.getElementById('storey').value); var nn = parseFloat(document.getElementById('storeySP').value);\n\t\t for(var i=0; i<n; i++){mass1.push(parseFloat(document.getElementsByName('mass')[i].value));}\n\t\t var length = parseFloat(document.getElementById('length').value)\/1000;\n\t\t var floorArea=maxContourArea*length*length\/(buildingLength*buildingLength);\t\n\/\/ generating alerts\nif(document.getElementById('vertIrr').value>1 && mass1[n-nn-1]== mass1[n-nn]){\nalert(\"\u201cYou haven't adjusted the mass for the storeys located above the setback or podium level. Please update the mass for this storeys.\u201d\");    \n}\nelse {\n  alert(\"\u201cBravo!! all inputs are successfully validated.\u201d\");\n}\n});\n\/\/completion of creating alert message\ndocument.getElementById(\"gfmanalysis\").addEventListener(\"click\", function(button) {    \n  if (document.getElementById(\"show_output\").style.display === \"none\") \t\t     document.getElementById(\"show_output\").style.display = \"block\";\n  else document.getElementById(\"show_output\").style.display = \"none\";\n});\n<\/script>\n<script type=\"text\/javascript\">\n\/\/ start of main programming\nconst btn_Swv = document.getElementById('gfmanalysis').addEventListener('click', function(e){\n alert(\"\u201cThanks!! all the output results are generated below.\u201d\");    \n\tvar mass1= [];         var height1= []; var n = parseFloat(document.getElementById('storey').value);\n\tvar Tperiod= [];         var RSA_T= []; \n         for(var i=0; i<n; i++){\n           mass1.push(parseFloat(document.getElementsByName('mass')[i].value));\n           height1.push(parseFloat(document.getElementsByName('height')[i].value));               \n         }\n\t\t \n\t\t   \n         for(var i=0; i<40; i++){\n           Tperiod.push(parseFloat(document.getElementsByName('Tperiod')[i].value));\n           RSA_T.push(parseFloat(document.getElementsByName('RSA_T')[i].value)*9.81);               \n          }\n             \/\/ filtering the array and only taking valid values;\n\t \n        mass1= mass1.filter(function(e){ return e === 0 || e });\n        height1= height1.filter(function(e){ return e === 0 || e });\n\t\tTperiod= Tperiod.filter(function(e){ return e === 0 || e });\n        RSA_T= RSA_T.filter(function(e){ return e === 0 || e });\n\t\tmass=mass1;\n\t\tfor(var i=0; i<n; i++){height.push(height1[i]);}\n\tvar maxheight = Math.max.apply(null, height1);\n    var totalmass1 = 0;\n    for(var i =0; i<mass1.length; i++){\n      totalmass1 += Number(mass1[i]);\n    }       \n\n \/\/ determining modal properties: modal coefficient and Teff for the first mode\n \/\/ 1. reading I value from the floor plan\nvar length=document.getElementById('length').value;\nvar dir=document.getElementById('dir').value;\nvar Ix=0; var Iy=0; let scaleFac=length\/buildingLength;\n  for (let i = 0; i < M_old_x.length; i++) {Ix += M_old_x[i];\tIy += M_old_y[i];}\n  if (dir ==1){var I0= Ix*Math.pow(scaleFac,4);}\n  if (dir ==2){var I0= Iy*Math.pow(scaleFac,4);}\n  else {I0= Math.min(Iy,Ix)*Math.pow(scaleFac,4);} \/\/ second moment of area of the walls in m^4 \n\n \/\/ 2. reading P value\nlet alpha;\nif (systemType==1){alpha=0.67*maxheight*Math.sqrt(2*SlabD*SlabD\/(1.5*2.4*I0));} \nif (systemType==3){alpha= 2.5*n*Math.sqrt((3.2\/(BspacinG*scaleFac))*n*IB\/(IwallC*Math.pow(scaleFac,4)));}\n \/\/ 4. determining modal coefficient\nvar refNh= [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0];\nvar xref=[0,0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1];\n    \/\/creating array of normalized height\n    var nh = [];\n    for(var i =0; i<height1.length; i++){\n      var htratio= height1[i]\/maxheight;\n      nh.push(htratio);\n    }\nlet phi = []; let targetHeights=[];\nlet A1 = -0.0008 * alpha * alpha * alpha + 0.0167 * alpha * alpha + 0.0316 * alpha - 0.0080; \nlet A2 = 0.0018 * alpha * alpha * alpha - 0.0491 * alpha * alpha + 0.2504 * alpha + 1.5437;\nlet A3 = -0.0009 * alpha * alpha * alpha + 0.0324 * alpha * alpha - 0.2820 * alpha - 0.5357;\nfor (let i = 0; i < xref.length; i++) {\n    phi.push(A1*xref[i]+A2*xref[i]*xref[i]+A3*xref[i]*xref[i]*xref[i]);\n}\n\/\/ Linear interpolation for phi at the desired heights\nlet Phi = [];\n\/\/ finding out phi array for the building at each storey from roof to bottom\n   for(var i =1; i<(height1.length); i++){\n    var x= parseInt(nh[i]*10)\/10;    var position= refNh.indexOf(x);\n    var y2= phi[position]; var y1= phi[position-1];\n      Phi.push(((y2-y1)*(nh[i]-(x+0.1))\/(-0.1))+y1);  \n    }\n    Phi.push(1);\nlet sum_phi_squared = 0;\nlet sum_phi = 0;\n\n\/\/ Calculate the sums using for loops\nfor (let i = 0; i < mass1.length; i++) {\n    sum_phi_squared += Math.pow(Phi[i], 2) * mass1[i]; \/\/ Sum of phi squared times mass\n    sum_phi += Phi[i] * mass1[i];                      \/\/ Sum of phi times mass\n}\nlet participation_factors = sum_phi\/sum_phi_squared;\nlet pfjm1=[];\nfor (let i = Phi.length - 1; i >= 0; i--) {pfjm1.push(Phi[i] * participation_factors);}\npfjm1.push(0);\n\n\/\/ determination of modal Period\nvar FC = document.getElementById('fc').value;  var fc;\nif (FC === null || FC === \"\") {    fc = 50; } else { fc = parseFloat(FC); }\n \/\/ 3. determining period\nlet E = (155*fc+27000)* 1000; \/\/ modulus of rigidity of concrete in kPa\nif (alpha <= 3.4) {\n    var gamma1 = (0.36 * Math.pow(alpha, 4) - 2.93 * Math.pow(alpha, 3) + 6.43 * Math.pow(alpha, 2) - 0.57 * alpha + 187.55) \/ 100;\n} else {\n    gamma1 = 0.486 * Math.exp(-0.174 * alpha) + 1.666 * Math.exp(-0.001 * alpha);\n}\nlet He=(1+0.67*maxheight);\nlet period=2 * Math.PI*Math.sqrt((1\/participation_factors)*totalmass1*He*He*He\/((gamma1*gamma1)*E*I0));\nif(isNaN(gamma1)){\nif (alpha<=1.5){ period= 1.25*0.05*Math.pow(maxheight,0.75);}\nelse if (alpha<=5){period= 1.25*0.0625*Math.pow(maxheight,0.75);}\nelse{period= 1.25*0.075*Math.pow(maxheight,0.75);}\n}\n\/\/ completion of the determination of the modal properties\nvar Teff1= period;\nvar Teff=Teff1;\nvar Teff2= Teff1*0.2;\nvar Teff3= Teff1*0.1;\nvar p=4*Math.PI*Math.PI;\n\/\/determine TC and TD called here in as Tss and Tsss\nlet lastRepeatingIndex1 = -1; let lastRepeatingIndex2 = -1;\nfor (let i = 0; i < RSA_T.length - 1; i++) {\n  if (RSA_T[i] === RSA_T[i + 1]) {\n    lastRepeatingIndex1 = i + 1; \/\/ Update the index\n  }\n  if ((RSA_T[i]*Tperiod[i]\/9.81).toFixed(2) === (RSA_T[i + 1]*Tperiod[i+1]\/9.81).toFixed(2)) {\n    lastRepeatingIndex2 = i + 1; \/\/ Update the index\n  }\n}\nTss=Tperiod[lastRepeatingIndex1];\nTsss=Tperiod[lastRepeatingIndex2];\n  var RSA1= interp1(Tperiod,RSA_T,Teff1);  \n  RSD1= (RSA1*1000*((Teff1*Teff1)\/p)).toFixed(3);\n var RSA2= interp1(Tperiod,RSA_T,Teff2);  RSD2= (RSA2*1000*((Teff2*Teff2)\/p)).toFixed(3);\n  var RSA3= interp1(Tperiod,RSA_T,Teff3);  RSD3= (RSA3*1000*((Teff3*Teff3)\/p)).toFixed(3);\n   \/\/ creating reference normalised height and participation factor array\n      var refpfjm2= [0.639, 0.373, 0.077, -0.201, -0.419, -0.547, -0.573, -0.501, -0.356, -0.173, 0];\n      var refpfjm3= [0.312, 0.066, -0.181, -0.31, -0.258, -0.062, 0.168, 0.315, 0.321, 0.194, 0];\n   \n  \/\/ finding out participation factor array for the building at each storey from roof to bottom\n     var pfjm2 = [];    var pfjm3 = [];\n    for(var i =1; i<(height1.length); i++){\n    var xx= parseInt(nh[i]*10);\n    var x= xx\/10;\n    var position= refNh.indexOf(x);\n    var beforeposition= position-1;\n\tvar y22= refpfjm2[position];\n    var y32= refpfjm3[position];\n    var y21= refpfjm2[beforeposition];\n    var y31= refpfjm3[beforeposition];\n    var pfjmi2= ((y22-y21)*(nh[i]-(x+0.1))\/(-0.1))+y21;\n    var pfjmi3= ((y32-y31)*(nh[i]-(x+0.1))\/(-0.1))+y31;\n    pfjm2.push(pfjmi2);    pfjm3.push(pfjmi3);\n    }\n    pfjm2.unshift(refpfjm2[0]);  pfjm3.unshift(refpfjm3[0]);\n \n\/\/ determining effective mass of 3 modes\n   \/\/ calculating effective mass and effective displacement\n     var sum_md = 0;      var sum_md2 = 0;\n     for(var i =0; i<mass1.length; i++){sum_md += Number(mass1[i]*pfjm1[i]); }\n     for(var i =0; i<mass1.length; i++){sum_md2 += Number(mass1[i]*pfjm1[i]*pfjm1[i]);\n     }\n  var meff= (sum_md*sum_md)\/sum_md2;  \n  var meff1= meff;\n  \/\/ determining participation mass factor\n  var mn1= meff1\/totalmass1;\n  \/\/ baseshear\n     \/\/ base shear distribution\n     if (Teff<= 0.5){var k= 1;}     else if (Teff>= 2.5){k= 2;}     else {k= 0.5*(Teff-0.5)+1;}\n    \/\/ base shear distribution to each storey\n     var sum_zm = 0;\n     for(var i =0; i<mass1.length; i++){\n      sum_zm += Number(mass1[i]*Math.pow(height1[i],k));\n     }\n\n\n var Fi= []; var Baseshear=0;\n     for(var j =0; j<mass1.length; j++){\n      var Fii= (mass1[j]*pfjm1[j]*RSA1);\n      Fi.push(Fii);\n\t  Baseshear+=Fii;\n     }\n \/\/producing Fi* Array and di* Array for first mode\n   var eff_F1_i= [];\n   var eff_d1_i= [];\n     for(var j =0; j<mass1.length; j++){\n      eff_F1_i.push(Fi[j]);\n      eff_d1_i.push(pfjm1[j]*RSD1);\n     }\n\/\/producing Fi2* Array and di2* Array for second mode\n   var eff_F2_i= [];\n   var eff_d2_i= [];\n     for(var j =0; j<mass1.length; j++){\n      eff_F2_i.push(mass1[j]*pfjm2[j]*RSA2);\n      eff_d2_i.push(pfjm2[j]*RSD2);\n     }\n  \/\/producing Fi3* Array and di3* Array for third mode\n   var eff_F3_i= [];\n   var eff_d3_i= [];\n     for(var j =0; j<mass1.length; j++){\n      eff_F3_i.push(mass1[j]*pfjm3[j]*RSA3);\n      eff_d3_i.push(pfjm3[j]*RSD3);\n     }\n\t \/\/ applying the directional combinational rule\n\t var Ixx=Ix*Math.pow(scaleFac,4); var Iyy=Iy*Math.pow(scaleFac,4);\n     periodx=period*Math.pow(I0\/Ixx,0.5); periody=period*Math.pow(I0\/Iyy,0.5);\n\n\t if (periodx>periody){\n\t var RSA11= interp1(Tperiod,RSA_T,periody); var RSA12= interp1(Tperiod,RSA_T,periodx);\n\t var RSD11= (RSA12*1000*((periodx*periodx)\/p)).toFixed(3);\n\t var RSD12= (RSA11*1000*((periody*periody)\/p)).toFixed(3);\n\t }\n\t else{RSA11= interp1(Tperiod,RSA_T,periodx); RSA12= interp1(Tperiod,RSA_T,periody);\n\t RSD11= (RSA11*1000*((periody*periody)\/p)).toFixed(3);\n\t RSD12= (RSA12*1000*((periodx*periodx)\/p)).toFixed(3); \n\t }\n\t \n\/\/ combining Fi and di of 3 modes\n    var eff_Fi= [];\n      for(var j =0; j<mass.length; j++){\n        var sqr1= eff_F1_i[j]*eff_F1_i[j] + eff_F2_i[j]*eff_F2_i[j] + eff_F3_i[j]*eff_F3_i[j];\n        var sqr2= eff_d1_i[j]*eff_d1_i[j] + eff_d2_i[j]*eff_d2_i[j] + eff_d3_i[j]*eff_d3_i[j];\n\t\tif (dir<3){var SRSS1= Math.pow(sqr1,0.5); var SRSS2= Math.pow(sqr2,0.5);}\n        else {SRSS1= Math.pow(sqr1,0.5)*(per1*RSA11+per2*RSA12)\/(100*RSA1); SRSS2= Math.pow(sqr2,0.5)*(per1*RSD11+per2*RSD12)\/(100*RSD1);}\n\t   eff_Fi.push(SRSS1);\n       eff_displacement.push(SRSS2);\n      }\n    \/\/ calculation of inter storey drift of first three modes\n  var displacement1= eff_d1_i;\n  var eff_d1_i1= eff_d1_i;\n  var eff_d2_i2= eff_d2_i;\n  var eff_d3_i3= eff_d3_i;\n  displacement1.push(0);\n  eff_d1_i1.push(0);\n  eff_d2_i2.push(0);\n  eff_d3_i3.push(0);\n  height1.push(0);\n  var input_inters_drift= [];\n  var gfm_inters_drift= [];\n    for(var j =0; j<mass.length; j++){\n     var jp= ((displacement1[j]-displacement1[j+1])\/(height1[j]-height1[j+1]));\n     var jpt= jp\/10;\n     var jpp= ((eff_d1_i1[j]-eff_d1_i1[j+1])\/(height1[j]-height1[j+1]));\n     var jptt= jpp\/10;\n     var jppp= ((eff_d2_i2[j]-eff_d2_i2[j+1])\/(height1[j]-height1[j+1]));\n     var jpttt= jppp\/10;\n     var jpppp= ((eff_d3_i3[j]-eff_d3_i3[j+1])\/(height1[j]-height1[j+1]));\n     var jptttt= jpppp\/10;\n      if (maxheight <30){\n      var jptsquare= jptt*jptt;\n    }\n    else {\n    jptsquare= jptt*jptt + jpttt*jpttt + jptttt*jptttt;\n    }\n    var idrgfm=Math.pow(jptsquare, 0.5);\n    input_inters_drift.push(jpt);\n    gfm_inters_drift.push(idrgfm);\n    }\n    input_inters_drift.push(input_inters_drift[input_inters_drift.length-1]);\n     gfm_inters_drift.push(gfm_inters_drift[gfm_inters_drift.length-1]);\n  \/\/ end of combination\n  \n  \/\/ determining combined storey-shear of first three modes\n  var input_shear= [];\n  var gfm_shear= [];\n  var storeyshear = 0;\n  var storeysheargfm1 = 0;\n  var storeysheargfm2 = 0;\n  var storeysheargfm3 = 0;\n  for(var j =0; j<mass.length; j++){\n   storeyshear += Number(Fi[j]);\n   storeysheargfm1 += Number(eff_F1_i[j]);\n   storeysheargfm2 += Number(eff_F2_i[j]);\n   storeysheargfm3 += Number(eff_F3_i[j]);\n   input_shear.push(storeyshear);\n     var shearsquare= storeysheargfm1*storeysheargfm1 + storeysheargfm2*storeysheargfm2 + storeysheargfm3*storeysheargfm3;\n     var shearsqrt= Math.pow(shearsquare,0.5);\n     gfm_shear.push(shearsqrt);\n   }\n  input_shear.push(input_shear[input_shear.length-1]);\n  gfm_shear.push(gfm_shear[gfm_shear.length-1]);\n\n  \/\/ determining combined base shear of first three modes\n  var Vb1= 0;\n  for(var j =0; j<mass.length; j++){\n    Vb1 += Number(eff_F1_i[j]);\n  }\n  var Vb2 = 0;\n    for(var j =0; j<mass.length; j++){\n      Vb2 += Number(eff_F2_i[j]);\n    }\n    var Vb3 = 0;\n    for(var j =0; j<mass.length; j++){\n      Vb3 += Number(eff_F3_i[j]);\n    }\n    \/\/total base shear\n    vsquare= Vb1*Vb1 + Vb2*Vb2 + Vb3*Vb3;\n    var Vbsum= Math.pow(vsquare,0.5);\n   \/\/ total overturning moment\n   var OTM1=0;\n   for(var j =0; j<mass.length; j++){\n   OTM1 += Number(eff_F1_i[j]*height[j]);\n   }\n   var OTM2=0;\n   for(var j =0; j<mass.length; j++){\n   OTM2 += Number(eff_F2_i[j]*height[j]);\n   }\n   var OTM3=0;\n   for(var j =0; j<mass.length; j++){\n   OTM3 += Number(eff_F3_i[j]*height[j]);\n   }\n   otmsquare= OTM1*OTM1 + OTM2*OTM2 + OTM3*OTM3;\n   var OTM= Math.pow(otmsquare,0.5);\n  \n\/\/ creating table for base shear and total overturning moment\n  var meff2= Math.abs(Vb2)\/RSA2;\n  var meff3= Math.abs(Vb3)\/RSA3;\n    var mn2= meff2\/totalmass1;\n  var mn3= meff3\/totalmass1;\n  \nvar otm= Math.round(OTM);\nvar vbsum= Math.round(Vbsum);\nvar lis = document.getElementById('set-val01');\nvar roow = document.createElement('tr');\nroow.innerHTML = `<td colspan=\"9\" style=\"text-align: center; height:20px; border: 1px solid black;\">${\" Total Base Shear =\" + '&nbsp;'+'&nbsp;'+ vbsum +'&nbsp;'+'&nbsp;'+ \"kN\"}<\/td>`;\nlis.appendChild(roow);\n\nvar lisotm = document.getElementById('set-val0001');\nvar roowotm = document.createElement('tr');\nroowotm.innerHTML = `<td colspan=\"9\" style=\"text-align: center; height:20px; border: 1px solid black;\">${\"Total Overturning Moment =\"+ '&nbsp;'+'&nbsp;'+ otm + '&nbsp;'+'&nbsp;'+\"kNm\"}<\/td>`;\nlisotm.appendChild(roowotm);                  \n\/\/ completion of table for base shear and overturning moment\n\n\/\/ table output for Meff; deff; Keff; Teff of 3modes\nvar firstrow1= document.getElementById('set-first1');\n          var thead1= document.createElement('tr');\n                             \n          thead1.innerHTML= `<td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${''}<\/td>\n          <td style=\"text-align: center; height:20px; width=175px; border: 1px solid black;\">${\"First Mode\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"Second Mode\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=250px; border: 1px solid black;\">${\"Third Mode\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=250px; border: 1px solid black;\">${\"Sum\"+'&nbsp;'+'&nbsp;'}<\/td>`;\n          firstrow1.appendChild(thead1);\nvar col1= [\"Effective Modal Mass (tonnes)\", \"Modal Participation Ratio\", \"Natural Period (sec) [T<sub>x<\/sub>,T<sub>y<\/sub>]\"];\nvar col2= [meff1.toFixed(1), roundTo(mn1, 2), \"[\"+ roundTo(periodx, 2)+\", \"+ roundTo(periody, 2)+\"]\"];\nvar col3= [meff2.toFixed(1), roundTo(mn2, 2),  \"[\"+ roundTo(periodx*0.2, 2)+\", \"+ roundTo(periody*0.2, 2)+\"]\"];\nvar col4= [meff3.toFixed(1), roundTo(mn3, 2),  \"[\"+ roundTo(periodx*0.1, 2)+\", \"+ roundTo(periody*0.1, 2)+\"]\"];\nvar col5= [(meff1+meff2+meff3).toFixed(1), \"-\", \"-\"];\nfor(var i=0; i<3; i++){\n  var col11= col1[i];\n  var col22 = col2[i];\n  var col33 = col3[i];\n  var col44 = col4[i];\n  var col55 = col5[i];\n  var smltable = document.getElementById('set-val2');\n  var rowx = document.createElement('tr');\n   rowx.innerHTML = `<td style=\"text-align: center; height:20px; border: 1px solid black;\">${'&nbsp;'+'&nbsp;'+col11+'&nbsp;'+'&nbsp;'}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${col22+\"&nbsp;&nbsp;\"}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${col33+\"&nbsp;&nbsp;\"}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${col44+\"&nbsp;&nbsp;\"}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${col55+\"&nbsp;&nbsp;\"}<\/td>`;\n  smltable.appendChild(rowx);                  \n}\nvar firstrww= document.getElementById('set-first001');\nvar thedd= document.createElement('tr');\nthedd.innerHTML= `<td colspan=\"5\" style=\"text-align: center; height:20px; width=775px; border: 1px solid black;\">${\"Total Mass =\"+'&nbsp;'+'&nbsp;'+ totalmass1.toFixed(1) +'&nbsp;'+'&nbsp;'+ \"tonnes\"}<\/td>`;\nfirstrww.appendChild(thedd);\n\nvar firstrwP= document.getElementById('set-first001P');\nvar theddP= document.createElement('tr');\ntheddP.innerHTML= `<td style=\"text-align: center; height:20px; width=500px; border: 1px solid black;\">${'&nbsp;'+'&nbsp;'+\"P-Value = H(GA\/EI)<sup>0.5<\/sup> =\"+'&nbsp;'+'&nbsp;'+ alpha.toFixed(2) +'&nbsp;'+'&nbsp;'+ \"\"}<\/td>\n<td style=\"text-align: center; height:20px; width=500px; border: 1px solid black;\">${\"Flexural rigidity, EI = \"+'&nbsp;'+'&nbsp;'+ parseInt(E*I0\/1000) +'&nbsp;'+'&nbsp;'+ \"MNm<sup>2<\/sup>\"+'&nbsp;'+'&nbsp;'}<\/td>`;\nfirstrwP.appendChild(theddP);\nnh.push(0);\n\/\/ plotting mode shape\nplotChart = document.getElementById('myDiv101');\n  var trace001 = {\n  x: pfjm1,\n  y: nh,\n  mode: 'lines',\n  name: 'Mode 1',\n  line: {shape: 'linear', width: 2, color: 'rgb(169,169,169)'},\n  type: 'scatter'\n};\nvar trace002 = {\n x: refpfjm2,\n  y: refNh,\n  mode: 'lines',\n  name: 'Mode 2',\n  line: {shape: 'linear', width: 2, color: 'rgba(67,67,67,1)'},\n  type: 'scatter'\n};\nvar trace003 = {\n x: refpfjm3,\n  y: refNh,\n  mode: 'lines',\n  name: 'Mode 3',\n  line: {dash: 'dash', shape: 'linear', width: 2, color: 'rgba(67,67,67,1)'},\n  type: 'scatter'\n};\n      \n  var data = [trace001, trace002, trace003];\n  var layout = {\n    title: {\n      text:'Mode Shape',\n      font: {\n        family: 'Arial',\n        size: 20\n      },\n      xref: 'paper',\n      x: 0.25,\n      y: -0.1,\n      \n     \n    },\n    xaxis: {\n      showgrid: false,\n     rangemode: 'tozero',\n     linecolor: 'rgb(204,204,204)',\n     linewidth: 2,\n     showticklabels: true,\n     autotick: true,\n     ticks: 'outside',\n     tickcolor: 'rgb(204,204,204)',\n     tickwidth: 2,\n     ticklen: 5,\n     tickfont: {\n     family: 'Arial',\n      size: 12,\n      color: 'rgb(82, 82, 82)'\n     },\n      title: {\n        text: '&#915; &#981;',\n          font: {\n          family: 'Arial',\n          size: 14,\n          color: '#7f7f7f'\n        },\n      },\n    },\n   \n    yaxis: {\n      showgrid: false,\n      rangemode: 'tozero',\n      linecolor: 'rgb(204,204,204)',\n     linewidth: 2,\n     showticklabels: true,\n     autotick: true,\n     ticks: 'outside',\n     tickcolor: 'rgb(204,204,204)',\n     tickwidth: 2,\n     ticklen: 5,\n     tickfont: {\n     family: 'Arial',\n      size: 12,\n      color: 'rgb(82, 82, 82)'\n     },\n      title: {\n       text: 'Height (m)',\n          font: {\n          family: 'Arial',\n          size: 14,\n          color: '#7f7f7f'\n          \n        },\n      },\n    },\n  };\n Plotly.newPlot('myDiv101', data, layout);\n\n \n \n     \/\/ ploting inter-storey drift\n     var storeyno= [];\n       for(var j =0; j<(height1.length-1); j++){\n          storeyno.push(j);\n       }\n       var storeyup= storeyno.reverse();\n     \n     plotChart = document.getElementById('myDiv1');\n   \n     var trace6 = {\n      x: gfm_inters_drift,\n      y: storeyup,\n      mode: 'lines',\n     line: {shape: 'vh', width: 2, color: 'rgba(67,67,67,1)'},\n      type: 'scatter'\n    };\n          \n      var data = [trace6];\n      var layout = {\n        title: {\n          text:'Inter-Storey Drift',\n          font: {\n            family: 'Arial',\n            size: 20\n          },\n          xref: 'paper',\n          x: 0.25,\n          y: -0.1,\n          \n         \n        },\n        xaxis: {\n          showgrid: false,\n         rangemode: 'tozero',\n         linecolor: 'rgb(204,204,204)',\n         linewidth: 2,\n         showticklabels: true,\n         autotick: true,\n         ticks: 'outside',\n         tickcolor: 'rgb(204,204,204)',\n         tickwidth: 2,\n         ticklen: 5,\n         tickfont: {\n         family: 'Arial',\n          size: 12,\n          color: 'rgb(82, 82, 82)'\n         },\n          title: {\n            text: 'Inter-Storey Drift (%)',\n              font: {\n              family: 'Arial',\n              size: 14,\n              color: '#7f7f7f'\n            },\n          },\n        },\n       \n        yaxis: {\n          showgrid: false,\n          rangemode: 'tozero',\n          linecolor: 'rgb(204,204,204)',\n         linewidth: 2,\n         showticklabels: true,\n         autotick: true,\n         ticks: 'outside',\n         tickcolor: 'rgb(204,204,204)',\n         tickwidth: 2,\n         ticklen: 5,\n         tickfont: {\n         family: 'Arial',\n          size: 12,\n          color: 'rgb(82, 82, 82)'\n         },\n          title: {\n           text: 'Storey no.',\n              font: {\n              family: 'Arial',\n              size: 14,\n              color: '#7f7f7f'\n              \n            },\n          },\n        },\n      };\n     Plotly.newPlot('myDiv1', data, layout);\n\n     \/\/ ploting Storey Shear\n   plotChart = document.getElementById('myDiv2');\n    var trace8 = {\n      x: gfm_shear,\n      y: storeyup,\n      mode: 'lines',\n      line: {shape: 'vh', width: 2, color: 'rgba(67,67,67,1)'},\n      type: 'scatter'\n    };\n          \n      var data = [trace8];\n      var layout = {\n        title: {\n          text:'Storey Shear',\n          font: {\n            family: 'Arial',\n            size: 20\n          },\n          xref: 'paper',\n          x: 0.25,\n          y: -0.1,\n          \n         \n        },\n        xaxis: {\n          showgrid: false,\n         rangemode: 'tozero',\n         linecolor: 'rgb(204,204,204)',\n         linewidth: 2,\n         showticklabels: true,\n         autotick: true,\n         ticks: 'outside',\n         tickcolor: 'rgb(204,204,204)',\n         tickwidth: 2,\n         ticklen: 5,\n         tickfont: {\n         family: 'Arial',\n          size: 12,\n          color: 'rgb(82, 82, 82)'\n         },\n          title: {\n            text: 'Storey Shear (kN)',\n              font: {\n              family: 'Arial',\n              size: 14,\n              color: '#7f7f7f'\n            },\n          },\n        },\n       \n        yaxis: {\n          showgrid: false,\n          rangemode: 'tozero',\n          linecolor: 'rgb(204,204,204)',\n         linewidth: 2,\n         showticklabels: true,\n         autotick: true,\n         ticks: 'outside',\n         tickcolor: 'rgb(204,204,204)',\n         tickwidth: 2,\n         ticklen: 5,\n         tickfont: {\n         family: 'Arial',\n          size: 12,\n          color: 'rgb(82, 82, 82)'\n         },\n          title: {\n           text: 'Storey no.',\n              font: {\n              family: 'Arial',\n              size: 14,\n              color: '#7f7f7f'\n              \n            },\n          },\n        },\n      };\n     Plotly.newPlot('myDiv2', data, layout);\n \n \n\/\/ 3D effect\t   \n\n\/\/ change br value if the user input for the wall dimensions\nvar Newdimension= []; RATIO=[]; let resultMap = {};\n  for(var j=0; j<dim.length; j++){var newdim= document.getElementsByName('Newdimension')[j].value; newdim=parseFloat(newdim);\n     Newdimension.push(newdim);               \n  }\n   let Newdim= Newdimension.filter(Boolean);\n    if (Newdim.length>0){\n      for (let i = 0; i < dim.length; i++) {if (isNaN(Newdimension[i])) {Newdimension[i] = dim[i]*length*1000;} RATIO.push(Newdimension[i]\/(dim[i]*length*1000));}\n\t  \n\/\/convert ratio to 2dimensional array with each array containing ratio of particular wall only\nfor (let i = 0; i < dim.length; i++) {let key = sn[i];    if (!resultMap[key]) {resultMap[key] = [];}    resultMap[key].push(RATIO[i]);}\n\/\/ Iterate through the resultMap and append 1 to the end of subarrays with size 2\nObject.keys(resultMap).forEach(key => {\n    if (resultMap[key].length === 2) {\n        resultMap[key].push(1);\n    }\n});\nlet FinalRatio = Object.values(resultMap);\n \/\/ calculate new values of br\n ktor=0; ktransx=0; ktransy=0;\n  for (let i = 0; i < FinalRatio.length; i++) {\n        ktor += M_old_x[i]*FinalRatio[i][1]*FinalRatio[i][1]*FinalRatio[i][2]*disy[i]*disy[i]+ M_old_y[i]*FinalRatio[i][0]*FinalRatio[i][0]*FinalRatio[i][2]*disx[i]*disx[i];\n        ktransx += M_old_x[i]*FinalRatio[i][1]*FinalRatio[i][1]*FinalRatio[i][2];\n\t\tktransy += M_old_y[i]*FinalRatio[i][0]*FinalRatio[i][0]*FinalRatio[i][2];\n    }\n   br_CRy =Math.pow(ktor\/ktransy-eyr*eyr*rr*rr,0.5)\/rr; \n   br_CRx = Math.pow(ktor\/ktransx-exr*exr*rr*rr,0.5)\/rr;\n  }\nvar r=rr*length\/buildingLength;\nif (dir==3){ if (period==periodx){dir=1;} else{dir=2;}}\nvar br_CR;\nif (dir==2){br_CR=br_CRy; var er=exr;} else {br_CR=br_CRx;er=eyr;} \n\n\/\/ finction is created below for dis3d so that it can be called when required\nfunction calculateDis3Dj(Tj, thetaj, Br, pfj, lambdaj) { \n    if (Tj < Tss) {var dis3dJ = (1 - thetaj * Br) * pfj \/ (lambdaj * lambdaj);}\n    else if (Tj >= Tss && Tj < Tsss) {dis3dJ = (1 - thetaj * Br) * pfj \/ lambdaj;}\n    else {dis3dJ = (1 - thetaj * Br) * pfj;}\n    return dis3dJ;\n}\n\n\/\/ d3D\/d2D calculation\n\/\/ biaxial torsion about x (lambda will have three values)\nif (dir==2){var brR = br_CRy; var e1=exr; var e2=eyr; var ar=Math.pow(periody \/ periodx, 2);} \nelse {brR = br_CRx; e1=eyr; e2=exr; ar=Math.pow(periodx \/ periody, 2);}\n        let Ar = ar * Math.pow(e2, 2) + Math.pow(e1, 2) + Math.pow(brR, 2);\n \n        function equation(x) {return (ar - x) * ((1 - x) * (Ar - x) - Math.pow(e1, 2)) - Math.pow(ar * e2, 2) * (1 - x);}\n\t\tfunction newtonRaphson(f, x0, tol = 1e-5, maxIter = 1000) {\n            let x = x0;\n            for (let i = 0; i < maxIter; i++) {\n                let f_x = f(x); let f_prime_x = (f(x + tol) - f(x))\/ tol;  let x_next = x - f_x \/ f_prime_x;\n                if (Math.abs(x_next - x) < tol) {return x_next;}  \/\/ Solution found\n                x = x_next;\n            }\n        }\n       let guesses = [0.4, 1, 3];  \/\/ Initial guesses array\n\t   let LAMBDa = []; let THETa = []; let Pf = []; let dis3DjP = []; let dis3DjM = [];\n       guesses.forEach(x0 => {\n\t   let solutioN=newtonRaphson(equation, x0);\n\t   let lamBDA=Math.sqrt(solutioN); \n\t   let theTA=(solutioN-1)\/e1;\n\t   let M =(e2\/e1)*((ar-ar*solutioN)\/(ar-solutioN));\n\t   let pF = 1\/(1+theTA*theTA+M*M);\n\t   \tLAMBDa.push(lamBDA); \t       THETa.push(theTA); \t       Pf.push(pF);\n\t   dis3DjP.push(calculateDis3Dj(Teff\/lamBDA, theTA, Br, pF, lamBDA));\n\t   dis3DjM.push(calculateDis3Dj(Teff\/lamBDA, theTA, -Br, pF, lamBDA));\n\t   });\n\t   let dis3DBiaxialP=Math.sqrt(dis3DjP[0]*dis3DjP[0]+dis3DjP[1]*dis3DjP[1]+dis3DjP[2]*dis3DjP[2]);\n\t   let dis3DBiaxialM=Math.sqrt(dis3DjM[0]*dis3DjM[0]+dis3DjM[1]*dis3DjM[1]+dis3DjM[2]*dis3DjM[2]);\n\t   let dis3DBiaxial=Math.max(dis3DBiaxialP,dis3DBiaxialM);\nif (br_CR<1){alert(\"Building is torsionally unstable because br<1.\"); }\n\nvar lambdaj1=Math.pow(0.5*(1+er*er+br_CR*br_CR)+Math.pow(Math.pow(0.5*(1-er*er-br_CR*br_CR),2)+er*er,0.5),0.5);\nvar thetaj1=(lambdaj1*lambdaj1-1)\/er; \nvar pfj1=1\/(1+thetaj1*thetaj1);\nvar lambdaj2=Math.pow(0.5*(1+er*er+br_CR*br_CR)-Math.pow(Math.pow(0.5*(1-er*er-br_CR*br_CR),2)+er*er,0.5),0.5);\nvar thetaj2=(lambdaj2*lambdaj2-1)\/er; \nvar pfj2=1\/(1+thetaj2*thetaj2);\n var dis3D1P=calculateDis3Dj(Teff\/lambdaj1, thetaj1, Br, pfj1, lambdaj1);\n var dis3D1M=calculateDis3Dj(Teff\/lambdaj1, thetaj1, -Br, pfj1, lambdaj1);\n var dis3D2P=calculateDis3Dj(Teff\/lambdaj2, thetaj2, Br, pfj2, lambdaj2);\n var dis3D2M=calculateDis3Dj(Teff\/lambdaj2, thetaj2, -Br, pfj2, lambdaj2);\n dis3d=Math.max(Math.sqrt(dis3D1P*dis3D1P+dis3D2P*dis3D2P),Math.sqrt(dis3D1M*dis3D1M+dis3D2M*dis3D2M)).toFixed(2);\n LAMBDA=[lambdaj1,lambdaj2]; THETA=[thetaj1,thetaj2]; PF=[pfj1,pfj2];\n\n\n\/\/ finalising the final 3d image\n\/\/ visualise CR br er\ncv.circle(img,new cv.Point(CR_x,CR_y) , 10, new cv.Scalar(0, 0, 0), -1);\ncv.putText(img, 'CR',new cv.Point(CR_x+10,CR_y),cv.FONT_HERSHEY_TRIPLEX, 1.2, new cv.Scalar(0, 0, 0), 2);\n\/\/ Convert the grayscale image to BGR\nlet imgColor = new cv.Mat();\ncv.cvtColor(img, imgColor, cv.COLOR_GRAY2BGR);\n\nlet xval=[]; let yval=[];\n\/\/ Find the coordinate of building contour\n    for (let j = 0; j < ContourBuilding.data32S.length \/ 2; j++) {\n        xval.push(ContourBuilding.data32S[j * 2]);        \/\/ x-coordinate\n        yval.push(ContourBuilding.data32S[j * 2 + 1]);    \/\/ y-coordinate\n    }\n\txMAX=Math.max(...xval);\txMIN=Math.min(...xval);\tyMAX=Math.max(...yval);\tyMIN=Math.min(...yval);\t\n\/\/ display flexible edge\nlet topCenter=new cv.Point(xval[yval.indexOf(yMIN)], yMIN);\nlet bottomCenter=new cv.Point(xval[yval.indexOf(yMAX)], yMAX);\nlet leftCenter=new cv.Point(xMIN,yval[xval.indexOf(xMIN)]);\nlet rightCenter=new cv.Point(xMAX,yval[xval.indexOf(xMAX)]);\nif (dir==1 || dir==3){if ((CR_y-rect.y)>(rect.height-CR_y)){cv.circle(imgColor,topCenter , 20, new cv.Scalar(255, 0, 0), -1);drawArrow(imgColor, topCenter, 'right');} \n           else {cv.circle(imgColor,bottomCenter , 20, new cv.Scalar(255, 0, 0), -1);drawArrow(imgColor, bottomCenter, 'right');}}\nif (dir==2) {if ((CR_x-rect.x)>(rect.width-CR_x)){cv.circle(imgColor,leftCenter , 20, new cv.Scalar(255, 0, 0), -1); drawArrow(imgColor, leftCenter, 'up');} \n            else {cv.circle(imgColor,rightCenter , 20, new cv.Scalar(255, 0, 0), -1);drawArrow(imgColor, rightCenter, 'up');}}\ncv.imshow('canvasOutput',imgColor); \/\/ Image showing the final results\nimgColor.delete();\n\n\/\/ Function to draw arrows in specified directions\nfunction drawArrow(image, basePoint, direction) {\n    if (direction === 'right') {\n        \/\/ Draw the X arrow (right direction)\n        cv.line(image, new cv.Point(basePoint.x, basePoint.y), new cv.Point(basePoint.x + 100, basePoint.y), new cv.Scalar(255, 0, 0), 5);\n        cv.line(image, new cv.Point(basePoint.x + 100, basePoint.y), new cv.Point(basePoint.x + 90, basePoint.y + 10), new cv.Scalar(255, 0, 0), 5);\n        cv.line(image, new cv.Point(basePoint.x + 100, basePoint.y), new cv.Point(basePoint.x + 90, basePoint.y - 10), new cv.Scalar(255, 0, 0), 5);\n    } else if (direction === 'up') {\n        \/\/ Draw the Y arrow (up direction)\n        cv.line(image, new cv.Point(basePoint.x, basePoint.y), new cv.Point(basePoint.x, basePoint.y - 100), new cv.Scalar(255, 0, 0), 5);\n        cv.line(image, new cv.Point(basePoint.x, basePoint.y - 100), new cv.Point(basePoint.x + 10, basePoint.y - 90), new cv.Scalar(255, 0, 0), 5);\n        cv.line(image, new cv.Point(basePoint.x, basePoint.y - 100), new cv.Point(basePoint.x - 10, basePoint.y - 90), new cv.Scalar(255, 0, 0), 5);\n    }\n}\n\nlet rotationInterval;\nlet rotationDirection = 1;\nlet rotationAngle = 0;\n\n\/\/ Start rotation automatically when the script loads\nstartRotation();\n\nfunction rotateImage() {\n    rotationAngle += 1 * rotationDirection;\n\n    if (rotationAngle >= 15 || rotationAngle <= -15) {\n        rotationDirection *= -1;\n    }\n\n    canvasOutput.style.transform = `rotate(${rotationAngle}deg)`;\n}\n\n\/\/ Function to start rotation\nfunction startRotation() {\n    rotationInterval = setInterval(rotateImage, 100); \/\/ Adjust rotation speed as needed\n}\n\n \/\/ploting 3d and 2d displacement profile\n      for (var i=0; i < eff_displacement.length; i++) {\n        eff_3ddisplacement.push(eff_displacement[i]*dis3d);\n        }\n \/\/ table output for Meff; deff; Keff; Teff of first mode\nif(br_CR>=1){var leg=\"building is torsionally stable\";} else{leg=\"building is torsionally unstable\";}\nvar cool01= [\"Mass Radius of Gyration, r(m)\", \"Normalised Length, B<sub>r<\/sub>\",\"Normalised Elastic Ratio, b<sub>r<\/sub>\", \"Normalised Eccentricity, e<sub>xr<\/sub>\" , \"Normalised Eccentricity, e<sub>yr<\/sub>\" , \"3D\/2D Displacement Ratio\"];\nvar cool02= [r.toFixed(1), Br.toFixed(2),br_CR.toFixed(2)+'<br>'+' ('+leg+')', roundTo(exr, 3), roundTo(eyr, 3), dis3d];\nfor(var i=0; i<6; i++){\n  var cool011= cool01[i];\n  var cool022 = cool02[i];\n  var smlotable = document.getElementById('disratio');\n  var row0x = document.createElement('tr');\n   row0x.innerHTML = `<td style=\"text-align: center; height:20px; border: 1px solid black;\">${\"&nbsp;&nbsp;&nbsp;&nbsp;\"+cool011+\"&nbsp;&nbsp;\"}<\/td>\n                   <td style=\"text-align: center; height:20px; height:30px; border: 1px solid black;\">${cool022+\"&nbsp;&nbsp;\"}<\/td>`;\n  smlotable.appendChild(row0x);                  \n}\n\n          \/\/ creating table for user input download, table need to be created because without it it is giving table without input data\n          var firstrow= document.getElementById('set-first');\n          var thead= document.createElement('tr');\n                             \n          thead.innerHTML= `<td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${'&nbsp'+\"No.\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=175px; border: 1px solid black;\">${\"m<sub>i<\/sub> (tonnes)\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"H<sub>i<\/sub> (m)\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=250px; border: 1px solid black;\">${\"&#948;<sub>i_GFM<\/sub> (mm)\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"&#952;<sub>i_GFM<\/sub> (%)\"}<\/td>\n\t\t  <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"F<sub>i_GFM<\/sub> (kN)\"}<\/td>\n          <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"V<sub>i_GFM<\/sub> (kN)\"}<\/td>\n\t\t  <td style=\"text-align: center; height:20px; width=100px; border: 1px solid black;\">${\"3D &#948;<sub>i_GFM<\/sub> (mm)\"+'&nbsp'+'&nbsp'}<\/td>`;\n          firstrow.appendChild(thead);\nvar stno= [];\nfor(var i=1; i<mass.length+1; i++){\nstno.push(i);\n}\nvar storeynum= stno.reverse();\n  for(var j=0; j<mass.length; j++){\n    var a1= storeynum[j];\n    var b1= Math.round(mass[j]);\n    var c1= height[j];\n\tvar d1= Math.round(eff_displacement[j]*dis3d);\n    var e1= Math.round(eff_Fi[j]);\n    var f1= Math.round(eff_displacement[j]);\n    var g1= roundTo(gfm_inters_drift[j], 2);\n    var h1= Math.round(gfm_shear[j]);\n       \n  var list = document.getElementById('set-val');\n  var row = document.createElement('tr');\n   row.innerHTML = `<td style=\"text-align: center; height:20px; border: 1px solid black;\">${a1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${b1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${c1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${f1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${g1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${e1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${h1}<\/td>\n                   <td style=\"text-align: center; height:20px; border: 1px solid black;\">${d1}<\/td>`;\n  list.appendChild(row);                  \n}\n\/\/ finishing of preparing downloadable table\n\n  plotChart = document.getElementById('3dprofile');\n  displacement.push(0);\n  eff_displacement.push(0);   eff_3ddisplacement.push(0);\n  height.push(0);\n  var trace1 = {\n    x: eff_displacement,\n    y: height,\n    mode: 'lines',\n    name: 'GFM 2D',\n    line: {shape: 'linear', width: 2, color: 'rgb(0,0,0,1)'},\n    type: 'scatter'\n  };\n  var trace2 = {\n    x: eff_3ddisplacement,\n    y: height,\n    mode: 'lines',\n    name: 'GFM 3D',\n    line: {shape: 'linear', width: 2, color: 'rgba(255,0,0,1)'},\n    type: 'scatter'\n  };\n        \n    var data = [trace1, trace2];\n    var layout = {\n      title: {\n        text:'2D and 3D Displacement Profile',\n        font: {\n          family: 'Arial',\n          size: 20\n        },\n        xref: 'paper',\n        x: 0.25,\n        y: -0.1,\n        \n       \n      },\n      xaxis: {\n        showgrid: false,\n       rangemode: 'tozero',\n       linecolor: 'rgb(204,204,204)',\n       linewidth: 2,\n       showticklabels: true,\n       autotick: true,\n       ticks: 'outside',\n       tickcolor: 'rgb(204,204,204)',\n       tickwidth: 2,\n       ticklen: 5,\n       tickfont: {\n       family: 'Arial',\n        size: 12,\n        color: 'rgb(82, 82, 82)'\n       },\n        title: {\n          text: 'Displacement (mm)',\n            font: {\n            family: 'Arial',\n            size: 14,\n            color: '#7f7f7f'\n          },\n        },\n      },\n     \n      yaxis: {\n        showgrid: false,\n        rangemode: 'tozero',\n        linecolor: 'rgb(204,204,204)',\n       linewidth: 2,\n       showticklabels: true,\n       autotick: true,\n       ticks: 'outside',\n       tickcolor: 'rgb(204,204,204)',\n       tickwidth: 2,\n       ticklen: 5,\n       tickfont: {\n       family: 'Arial',\n        size: 12,\n        color: 'rgb(82, 82, 82)'\n       },\n        title: {\n         text: 'Height (m)',\n            font: {\n            family: 'Arial',\n            size: 14,\n            color: '#7f7f7f'\n            \n          },\n        },\n      },\n    };\n   Plotly.newPlot('3dprofile', data, layout);\ndocument.getElementById(\"reference\").style.display=\"block\";\n\n\n\/\/animation starts here\n        const canvas = document.getElementById('buildingCanvas');\n        const ctx = canvas.getContext('2d');\n\n        \/\/ Building parameters\n        const numFloors = 10;\n        const heightPerFloor = 0.1; \/\/ meters\n        const totalHeight = numFloors * heightPerFloor;\n        const pValue = 0;\n\n        \/\/ Create points along height\n        const numPoints = 11;\n        const heights = Array.from({length: numPoints}, (_, i) => (i * totalHeight) \/ (numPoints - 1));\n\n        \/\/ Calculate mode shapes\n        const a1_1 = -0.0008609567731 * Math.pow(pValue, 3) + 0.01696894913 * Math.pow(pValue, 2) + 0.02978194491 * pValue;\n        const a2_1 = 0.001842547794 * Math.pow(pValue, 3) - 0.05040748451 * Math.pow(pValue, 2) + 0.2602068356 * pValue + 1.5;\n        const a3_1 = -0.0009815910224 * Math.pow(pValue, 3) + 0.03343853541 * Math.pow(pValue, 2) - 0.2899887808 * pValue - 0.5;\n\n        \/\/ First mode shape\n        const modeShape1 = heights.map(h => \n            a1_1 * h + a2_1 * Math.pow(h, 2) + a3_1 * Math.pow(h, 3)\n        );\n\n        \/\/ Second mode shape\n        const modeShape2 = [0, -0.271, -0.557, -0.784, -0.897, -0.856, -0.656, -0.315, 0.121, 0.584, 1];\n\n        \/\/ Third mode shape\n        const modeShape3 = [0, 0.622, 1.030, 1, 0.538, -0.199, -0.827, -0.994, -0.580, 0.212, 1];\n\n        \/\/ Animation parameters\n        const amplitude1 = 1.0;\n        const amplitude2 = RSD2\/RSD1;\n        const amplitude3 = RSD3\/RSD1;\n        const omega1 = 2*Math.PI\/Teff;\n        const omega2 = omega1*4;\n        const omega3 = omega1*8;\n\n        \/\/ Adjusted scale factors for drawing\n        const scaleX = 150;\n        const scaleY = 500; \/\/ Drastically reduced for visibility\n        const offsetX = canvas.width \/ 2;\n        const offsetY = canvas.height - 50; \/\/ Bottom margin\n\n        \/\/ Animation function\n        function animate(timestamp) {\n            \/\/ Clear canvas\n            ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n            \/\/ Draw grid and axes\n            drawGrid();\n\n            \/\/ Calculate time\n            const time = (timestamp % (50000 * Math.PI))\/ (8000*Math.sqrt(Teff));\n\n            \/\/ Calculate displacements\n            const displacement1 = amplitude1 * Math.cos(omega1 * time);\n            const displacement2 = amplitude2 * Math.cos(omega2 * time);\n            const displacement3 = amplitude3 * Math.cos(omega3 * time);\n\n            \/\/ Calculate combined displacement\n            const displacementCombined = heights.map((h, i) => \n                modeShape1[i] * displacement1 +\n                modeShape2[i] * displacement2 +\n                modeShape3[i] * displacement3\n            );\n\n            \/\/ Draw building\n            drawBuilding(displacementCombined);\n\n            \/\/ Draw axes labels\n            drawAxesLabels();\n\n            \/\/ Continue animation\n            requestAnimationFrame(animate);\n        }\n\n        function drawGrid() {\n            ctx.strokeStyle = '#eee';\n            ctx.lineWidth = 1;\n\n            \/\/ Vertical grid lines\n            for (let x = -2; x <= 2; x += 0.5) {\n                ctx.beginPath();\n                ctx.moveTo(offsetX + x * scaleX, 50);\n                ctx.lineTo(offsetX + x * scaleX, offsetY);\n                ctx.stroke();\n            }\n\n            \/\/ Horizontal grid lines\n            for (let y = 0; y <= totalHeight; y += 0.1) {\n                ctx.beginPath();\n                ctx.moveTo(offsetX - 2 * scaleX, offsetY - y * scaleY);\n                ctx.lineTo(offsetX + 2 * scaleX, offsetY - y * scaleY);\n                ctx.stroke();\n            }\n\n            \/\/ Draw axes\n            ctx.strokeStyle = '#000';\n            ctx.lineWidth = 2;\n            \n            \/\/ Y axis\n            ctx.beginPath();\n            ctx.moveTo(offsetX - 2 * scaleX, offsetY);\n            ctx.lineTo(offsetX - 2 * scaleX, 50);\n            ctx.stroke();\n\n            \/\/ X axis\n            ctx.beginPath();\n            ctx.moveTo(offsetX - 2 * scaleX, offsetY);\n            ctx.lineTo(offsetX + 2 * scaleX, offsetY);\n            ctx.stroke();\n        }\n\n        function drawAxesLabels() {\n            ctx.fillStyle = 'black';\n            ctx.font = '12px Arial';\n            \n            \/\/ Y-axis labels (Floor numbers)\n            ctx.textAlign = 'right';\n            for (let i = 0; i <= numFloors; i++) {\n                const y = i * heightPerFloor;\n                const yPos = offsetY - y * scaleY;\n                ctx.fillText(`${i\/10}`, offsetX - 2.2 * scaleX, yPos + 4);\n                \n              \n            }\n\n            \/\/ X-axis labels (Displacement)\n            ctx.textAlign = 'center';\n            for (let x = -2; x <= 2; x += 0.5) {\n                ctx.fillText(x.toFixed(1), offsetX + x * scaleX, offsetY + 20);\n            }\n\n            \/\/ Axis titles\n            ctx.font = '14px Arial';\n            ctx.fillText('Displacement', canvas.width\/2, offsetY + 40);\n            ctx.save();\n            ctx.translate(30, canvas.height\/2);\n            ctx.rotate(-Math.PI\/2);\n            ctx.fillText('Normalized Height', 0, 0);\n            ctx.restore();\n        }\n\n        function drawBuilding(displacements) {\n            \/\/ Draw building line\n            ctx.beginPath();\n            ctx.strokeStyle = 'blue';\n            ctx.lineWidth = 2;\n            \n            for (let i = 0; i < heights.length; i++) {\n                const x = offsetX + displacements[i] * scaleX;\n                const y = offsetY - heights[i] * scaleY;\n                \n                if (i === 0) {\n                    ctx.moveTo(x, y);\n                } else {\n                    ctx.lineTo(x, y);\n                }\n            }\n            ctx.stroke();\n\n            \/\/ Draw floor markers\n            ctx.fillStyle = 'blue';\n            for (let i = 0; i <= numFloors; i++) {\n                const height = i * heightPerFloor;\n                const displacement = interpolate(heights, displacements, height);\n                const x = offsetX + displacement * scaleX;\n                const y = offsetY - height * scaleY;\n                \n                ctx.beginPath();\n                ctx.arc(x, y, 4, 0, 2 * Math.PI);\n                ctx.fill();\n            }\n        }\n\n        function interpolate(xValues, yValues, x) {\n            for (let i = 0; i < xValues.length - 1; i++) {\n                if (x >= xValues[i] && x <= xValues[i + 1]) {\n                    const ratio = (x - xValues[i]) \/ (xValues[i + 1] - xValues[i]);\n                    return yValues[i] + ratio * (yValues[i + 1] - yValues[i]);\n                }\n            }\n            return 0;\n        }\n\n        \/\/ Start animation\n        requestAnimationFrame(animate);\n\/\/animation finishes here\n\n\n\ne.preventDefault();\n}, {once: true});\n\n\n\n      \n\/\/ table download as excel xls\nfunction exportTableToExcel(gfm, filename = ''){\n  var downloadLink;\n  var dataType = 'application\/vnd.ms-excel';\n  var tableSelect = document.getElementById(gfm);\n  var tableHTML = tableSelect.outerHTML.replace(\/ \/g, '%20');\n  \n  \/\/ Specify file name\n  filename = filename?filename+'.xls':'excel_data.xls';\n  \n  \/\/ Create download link element\n  downloadLink = document.createElement(\"a\");\n  \n  document.body.appendChild(downloadLink);\n  \n  if(navigator.msSaveOrOpenBlob){\n      var blob = new Blob(['\\ufeff', tableHTML], {\n          type: dataType\n      });\n      navigator.msSaveOrOpenBlob( blob, filename);\n  }else{\n      \/\/ Create a link to the file\n      downloadLink.href = 'data:' + dataType + ', ' + tableHTML;\n  \n      \/\/ Setting the file name\n      downloadLink.download = filename;\n      \n      \/\/triggering the function\n      downloadLink.click();\n  }\n}\n\/\/ end of excel file\n\n\n    \/\/ creating pdf report\n    function generatePDF(){\n      var sh2 = document.getElementById(\"ShowInReportOnly\");     sh2.style.display = \"block\";\n      var sh1 = document.getElementById(\"show1\");      sh1.style.display = \"block\";\n      var hd1 = document.getElementById(\"hide1\");      hd1.style.display = \"none\";\n      var hdd1 = document.getElementById(\"hidee1\");    hdd1.style.display = \"none\";\n      var hd11 = document.getElementById(\"hide11\");    hd11.style.display = \"none\";\n\t  var hd2 = document.getElementById(\"hideit1\");    hd2.style.display = \"none\";\n\t  var hd22 = document.getElementById(\"hideit2\");   hd22.style.display = \"none\";\n\t  var hd222 = document.getElementById(\"hideit3\");  hd222.style.display = \"none\";\n\t  var hd2222 = document.getElementById(\"hideit4\");  hd2222.style.display = \"none\";\n      var hd3 = document.getElementById(\"hide3\");      hd3.style.display = \"none\";\n      var hbtn1 = document.getElementById(\"tryIt\");     hbtn1.style.display = \"none\";\n\t  var hide1 = document.getElementById(\"myTABLE\");      hide1.style.display = \"none\";\n\t  var hide2 = document.getElementById(\"myTABLEInfo\");      hide2.style.display = \"none\";\n      var hide3 = document.getElementById(\"ANIMATION\");    hide3.style.display = \"none\";\n\t  setTimeout(function() {\n    window.print();\n    hd1.style.display = \"block\";    hdd1.style.display = \"block\";   hbtn1.style.display = \"block\";    hd11.style.display = \"block\"; \n\thd2.style.display = \"block\"; hd22.style.display = \"block\"; hd222.style.display = \"block\"; hd2222.style.display = \"block\";\n\thd3.style.display = \"block\";    sh1.style.display = \"none\"; sh2.style.display = \"none\";hide1.style.display = \"block\"; hide2.style.display = \"block\"; hide3.style.display = \"block\";\n    }, 250); \/\/ 250ms delay to ensure rendering is complete\n\t}\n\t\n\t\nfunction update3D() {  \ndocument.getElementById(\"Check3DOriginal\").style.display= \"block\";\ndocument.getElementById(\"3dprofile\").style.display= \"none\";\ndocument.getElementById(\"canvasOutput3D\").style.display= \"block\";\ndocument.getElementById(\"canvasOutput\").style.display= \"none\";\ndocument.getElementById(\"canvasCheck3D\").style.display= \"none\";\n\/\/ position of CR is CR_x,CR_y\n    \/\/ Ensure the img variable refers to the original image\n    let imgColoR = new cv.Mat();\n    cv.cvtColor(img, imgColoR, cv.COLOR_GRAY2BGR); \/\/ Assuming `img` is defined earlier\n\tlet length = document.getElementById(\"length\").value;\n\tlet dir = document.getElementById(\"dir\").value;\n\tvar scaling=buildingLength\/length;\n    let XCOr = document.getElementById(\"XCOR\").value;\n\tlet Angle = document.getElementById(\"Angle\").value;\n    let YCOr = document.getElementById(\"YCOR\").value;\n\tif(XCOr=='' &#038;&#038; YCOr=='' &#038;&#038; Angle==''){alert(\"You haven't entered X &#038; Y-coordinates and the orientation angle.\");}\n    else{\n       if(XCOr==''){alert(\"You haven't entered X-coordinate.\");}\n       if(YCOr==''){alert(\"You haven't entered Y-coordinate.\");}\n       if(Angle==''){alert(\"You haven't entered orientation angle.\");}\n}\n\tXCOr = rect.x+XCOr*scaling;\n\tYCOr = rect.y+(rect.height-YCOr*scaling); \/\/correction needed as input is o at the bottom\n    let redDot = new cv.Point(XCOr, YCOr);\n    \/\/ Drawing based on direction\n    if (dir == 1 || dir == 3) {\n        cv.circle(imgColoR, redDot, 20, new cv.Scalar(255, 0, 0), -1);\n        drawArrow(imgColoR, redDot, 'right', Angle);\n    }\n    if (dir == 2) {\n        cv.circle(imgColoR, redDot, 20, new cv.Scalar(255, 0, 0), -1);\n        drawArrow(imgColoR, redDot, 'up', Angle);\n    }\n\n    \/\/ Show the result on the canvas\n    cv.imshow('canvasOutput3D', imgColoR);\n    imgColoR.delete();\n\n    \/\/ Function to draw arrows\n    function drawArrow(image, basePoint, direction,angle) {\n\t\/\/ Function to rotate a point (x, y) around origin (ox, oy) by theta degrees\nfunction rotatePoint(x, y, ox, oy, theta) {\n    let radians = theta * (Math.PI \/ 180);  \/\/ Convert theta to radians\n    let cosTheta = Math.cos(-radians);\n    let sinTheta = Math.sin(-radians);\n\n    \/\/ Apply rotation matrix\n    let newX = ox + (x - ox) * cosTheta - (y - oy) * sinTheta;\n    let newY = oy + (x - ox) * sinTheta + (y - oy) * cosTheta;\n\n    return new cv.Point(newX, newY);\n}\n\n\n\/\/ Angle to rotate (in degrees)\nlet theta = Angle;  \/\/ Change this to the desired angle\n\n\/\/ Points of the arrow before rotation\n\/\/let tipPoint = new cv.Point(basePoint.x, basePoint.y - 100);\n\/\/let rightWingPoint = new cv.Point(basePoint.x + 10, basePoint.y - 90);\n\/\/let leftWingPoint = new cv.Point(basePoint.x - 10, basePoint.y - 90);\n\nlet tipPoint = new cv.Point(basePoint.x+100, basePoint.y);\nlet rightWingPoint = new cv.Point(basePoint.x + 90, basePoint.y - 10);\nlet leftWingPoint = new cv.Point(basePoint.x + 90, basePoint.y +10);\n\n\/\/ Rotate all points around basePoint\nlet rotatedTip = rotatePoint(tipPoint.x, tipPoint.y, basePoint.x, basePoint.y, theta);\nlet rotatedRightWing = rotatePoint(rightWingPoint.x, rightWingPoint.y, basePoint.x, basePoint.y, theta);\nlet rotatedLeftWing = rotatePoint(leftWingPoint.x, leftWingPoint.y, basePoint.x, basePoint.y, theta);\n\n\/\/ Now draw the rotated arrow\ncv.line(image, basePoint, rotatedTip, new cv.Scalar(255, 0, 0), 5);\ncv.line(image, rotatedTip, rotatedRightWing, new cv.Scalar(255, 0, 0), 5);\ncv.line(image, rotatedTip, rotatedLeftWing, new cv.Scalar(255, 0, 0), 5);\n    }\n\n    \/\/ Rotation-related code\n    let rotationInterval;\n    let rotationDirection = 1;\n    let rotationAngle = 0;\n    const canvasOutput3D = document.getElementById(\"canvasOutput3D\");\n\n    \/\/ Start rotation automatically\n    startRotation();\n\n    function rotateImage() {\n        rotationAngle += 1 * rotationDirection;\n\n        if (rotationAngle >= 15 || rotationAngle <= -15) {\n            rotationDirection *= -1;\n        }\n\n        canvasOutput3D.style.transform = `rotate(${rotationAngle}deg)`;\n    }\n\n    function startRotation() {\n        rotationInterval = setInterval(rotateImage, 100); \/\/ Adjust rotation speed as needed\n    }\n\n    \/\/ Optional: You might want a stop function if you plan to stop the rotation at some point\n    function stopRotation() {\n        clearInterval(rotationInterval);\n    }\n\t\n\tlet eff_3ddisplacement_updated=[];\n\tvar CR_X=(CR_x-rect.x)*length\/rect.width; var CR_Y=(CR_y-rect.y)*length\/rect.width;\n\t\/\/ replot 3D Profile\n\tvar CRY_pos=Math.max(CR_y-rect.y,rect.height-CR_y); var CRX_pos=Math.max(CR_x-rect.x,rect.width-CR_x);\n\tfor(i=0;i<height.length;i++){\n\tvar THETAX=(eff_3ddisplacement[i]-eff_displacement[i])\/CRY_pos;\n    var THETAY=(eff_3ddisplacement[i]-eff_displacement[i])\/CRX_pos;\t\n\tif((CR_y-rect.y)>(rect.height-CR_y)){var scaledDispX=eff_displacement[i]-THETAX*(YCOr-CR_y);}\n\telse{scaledDispX=eff_displacement[i]+THETAX*(YCOr-CR_y);}\n\tif ((CR_x-rect.x)>(rect.width-CR_x)){var scaledDispY=eff_displacement[i]-THETAY*(XCOr-CR_x);}\n\telse{scaledDispY=eff_displacement[i]+THETAY*(XCOr-CR_x);}\n\t    let radians = Angle * (Math.PI \/ 180);  \/\/ Convert theta to radians\n    let cosTheta = Math.abs(Math.cos(Angle*(Math.PI \/ 180)));\n    let sinTheta = Math.abs(Math.sin(Angle*(Math.PI \/ 180)));\t\n\tif (dir == 1){eff_3ddisplacement_updated.push(scaledDispX*cosTheta);}\n\tif (dir == 2){eff_3ddisplacement_updated.push(scaledDispY*sinTheta);}\n\tif (dir == 3){eff_3ddisplacement_updated.push(scaledDispX*cosTheta*per1\/100+scaledDispY*sinTheta*per2\/100);}\n\t}\n plotChart = document.getElementById('3dprofileUpdated');\n\n  var trace1 = {\n    x: eff_displacement,\n    y: height,\n    mode: 'lines',\n    name: 'GFM 2D',\n    line: {shape: 'linear', width: 2, color: 'rgb(0,0,0,1)'},\n    type: 'scatter'\n  };\n  var trace2 = {\n    x: eff_3ddisplacement_updated,\n    y: height,\n    mode: 'lines',\n    name: 'GFM 3D',\n    line: {shape: 'linear', width: 2, color: 'rgba(255,0,0,1)'},\n    type: 'scatter'\n  };\n        \n    var data = [trace1, trace2];\n    var layout = {\n      title: {\n        text:'2D and 3D Displacement Profile',\n        font: {\n          family: 'Arial',\n          size: 20\n        },\n        xref: 'paper',\n        x: 0.25,\n        y: -0.1,\n        \n       \n      },\n      xaxis: {\n        showgrid: false,\n       rangemode: 'tozero',\n       linecolor: 'rgb(204,204,204)',\n       linewidth: 2,\n       showticklabels: true,\n       autotick: true,\n       ticks: 'outside',\n       tickcolor: 'rgb(204,204,204)',\n       tickwidth: 2,\n       ticklen: 5,\n       tickfont: {\n       family: 'Arial',\n        size: 12,\n        color: 'rgb(82, 82, 82)'\n       },\n        title: {\n          text: 'Displacement (mm)',\n            font: {\n            family: 'Arial',\n            size: 14,\n            color: '#7f7f7f'\n          },\n        },\n      },\n     \n      yaxis: {\n        showgrid: false,\n        rangemode: 'tozero',\n        linecolor: 'rgb(204,204,204)',\n       linewidth: 2,\n       showticklabels: true,\n       autotick: true,\n       ticks: 'outside',\n       tickcolor: 'rgb(204,204,204)',\n       tickwidth: 2,\n       ticklen: 5,\n       tickfont: {\n       family: 'Arial',\n        size: 12,\n        color: 'rgb(82, 82, 82)'\n       },\n        title: {\n         text: 'Height (m)',\n            font: {\n            family: 'Arial',\n            size: 14,\n            color: '#7f7f7f'\n            \n          },\n        },\n      },\n    };\n   Plotly.newPlot('3dprofileUpdated', data, layout);\n}\n\n<\/script>\n<script type=\"text\/javascript\">\n\n  let currentSlide=0;\n  function nextSlide() {\n    if (currentSlide < wallIds.length - 1) {\n      document.getElementById(`slide-${currentSlide}`).classList.remove('active');\n      currentSlide++;\n      document.getElementById(`slide-${currentSlide}`).classList.add('active');\n    }\n\tfor (let j = 0; j < wallIds.length; j++) {\n\t  if(j==currentSlide){document.getElementById(`WallImage${j + 1}`).style.display = \"block\";} else{document.getElementById(`WallImage${j + 1}`).style.display = \"none\";}\n\t  }\n}\n\n  \/\/ Define previousSlide globally\n  function prevSlide() {\n    if (currentSlide > 0) {\n      document.getElementById(`slide-${currentSlide}`).classList.remove('active');\n      currentSlide--;\n      document.getElementById(`slide-${currentSlide}`).classList.add('active');\n    }\n\tfor (let j = 0; j < wallIds.length; j++) {\n\t  if(j==currentSlide){document.getElementById(`WallImage${j + 1}`).style.display = \"block\";} else{document.getElementById(`WallImage${j + 1}`).style.display = \"none\";}\n\t  }\n  }\n  \n  \n<\/script>\n<script id=\"codeSnippet\" type=\"text\/code-snippet\">\ndocument.getElementById(\"showbtn1\").style.display= \"block\";\nlet wallImages = [];\nlet img0 = cv.imread('canvasInput');\nlet src=img0.clone();\ncv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);\ncv.threshold(src, src, 190, 255, cv.THRESH_BINARY_INV);\nlet imageoutput1 = src.clone(); \ncv.cvtColor(imageoutput1, imageoutput1, cv.COLOR_GRAY2BGR); \/\/ imageoutput1 is for showing first output image with bounding rectangle \n\/\/ detecting contours\ncontours = new cv.MatVector(); let hierarchy = new cv.Mat();\ncv.findContours(src, contours, hierarchy, cv.RETR_TREE, cv.CHAIN_APPROX_NONE);\nvar carea=[];\nfor (let i = 0; i < contours.size(); ++i) { carea.push(cv.contourArea(contours.get(i), false));}\nlet indCAreaMax=carea.indexOf(Math.max(...carea));\nmaxContourArea = carea[indCAreaMax];\nContourBuilding=contours.get(indCAreaMax);\n\/\/Draw counters and bounding rect\nrect = cv.boundingRect(contours.get(indCAreaMax));\ncv.rectangle(imageoutput1, new cv.Point(rect.x, rect.y), new cv.Point(rect.x + rect.width, rect.y + rect.height), new cv.Scalar(255, 0, 0), 2, cv.LINE_AA, 0);\nimageoutput11 = imageoutput1.clone(); \/\/ this is for tick mark to display dimensions\n\/\/ calculate CM and mass radius of gyration\nlet Moments = cv.moments(contours.get(indCAreaMax), false);\ncx = Moments.m10\/Moments.m00;\ncy = Moments.m01\/Moments.m00;\nrr = Math.pow((Moments.m20+Moments.m02)\/Moments.m00-cx*cx-cy*cy,0.5);\nbuildingLength=rect.width;\nimg = img0.clone();\ncv.cvtColor(img, img, cv.COLOR_RGBA2GRAY, 0);\ncv.circle(img,new cv.Point(cx,cy) , rr, new cv.Scalar(0, 0, 0), 2);\ncv.circle(img,new cv.Point(cx,cy),10,new cv.Scalar(0, 0, 0), -1);\ncv.putText(img, 'CM',new cv.Point(cx+10,cy),cv.FONT_HERSHEY_TRIPLEX, 1.2, new cv.Scalar(0, 0, 0), 2);\n\/\/ prepare image for the input of loading direction and length\n  \/\/ putting X axis and Y-axis in the image\ncv.line(imageoutput1, new cv.Point(cx,cy), new cv.Point(cx+100,cy), new cv.Scalar(255, 0, 0), 5);\ncv.line(imageoutput1, new cv.Point(cx+100,cy), new cv.Point(cx+90,cy+10), new cv.Scalar(255, 0, 0), 5);\ncv.line(imageoutput1, new cv.Point(cx+100,cy), new cv.Point(cx+90,cy-10), new cv.Scalar(255, 0, 0), 5);\ncv.putText(imageoutput1, 'X',new cv.Point(cx+110,cy),cv.FONT_HERSHEY_TRIPLEX, 1.2, new cv.Scalar(255, 0, 0), 5);\ncv.line(imageoutput1, new cv.Point(cx,cy), new cv.Point(cx,cy-100), new cv.Scalar(255, 0, 0), 5);\ncv.line(imageoutput1, new cv.Point(cx,cy-100), new cv.Point(cx+10,cy-90), new cv.Scalar(255, 0, 0), 5);\ncv.line(imageoutput1, new cv.Point(cx,cy-100), new cv.Point(cx-10,cy-90), new cv.Scalar(255, 0, 0), 5);\ncv.putText(imageoutput1, 'Y',new cv.Point(cx,cy-115),cv.FONT_HERSHEY_TRIPLEX, 1.2, new cv.Scalar(255, 0, 0), 5);\n\n\/\/\/\/\/\/\/ CR, er, br calculation starts here\n\n\/\/erode the floor plan to only include wall and columns and no beams. the thickness of the wall is also eroded therefore need to dilate\nlet kernel = cv.Mat.ones(5, 5, cv.CV_8U);let anchor = new cv.Point(-1, -1);\ncv.erode(src,src, kernel, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue()); cv.dilate(src, src, kernel, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue());\ncv.findContours(src, contours, hierarchy, cv.RETR_TREE, cv.CHAIN_APPROX_NONE);\ncv.drawContours(src, contours, indCAreaMax, new cv.Scalar(255, 255, 255), 1, cv.LINE_8, hierarchy, 100);\nvar eccent_x=0; var eccent_y =0; var ky2 =0; var kx2=0; var sumstiff_x=0; var sumstiff_y=0;\nlet img1 = img0.clone();\ncv.cvtColor(img1, img1, cv.COLOR_RGBA2GRAY, 0);\nlet poly = new cv.MatVector(); \nvar pID=[]; let wallCount = 1; \nfor (let i = 0; i < contours.size(); ++i) { \nvar area = cv.contourArea(contours.get(i), false);\nif (area>20){ \/\/you may put some limit here in the future if required\n        \/\/calculate the CM of objects\n        let Moment = cv.moments(contours.get(i), false);\n        let cx_wall = Moment.m10\/Moment.m00;  let cy_wall = Moment.m01\/Moment.m00;\n\t\t\/\/calculate the distance between the wall_CM and building_CM\n        var dis_x = cx_wall-cx; disx.push(dis_x);       var dis_y = cy_wall-cy; disy.push(dis_y);\n        eccent_x += Moment.mu20*dis_y; eccent_y += Moment.mu02*dis_x;\n        ky2 += Moment.mu20*dis_y*dis_y; kx2 += Moment.mu02*dis_x*dis_x;\n        \/\/calcualte the total stiffness\n        sumstiff_x += Moment.mu20;     sumstiff_y += Moment.mu02;\n\t\tM_old_x.push(Moment.mu20); M_old_y.push(Moment.mu02);\n    let keypts = new cv.Mat();\n\tcv.approxPolyDP(contours.get(i), keypts, 4, true);\n\t\/\/ poly.push_back(keypts);\tcv.drawContours(src, poly, i, new cv.Scalar(0, 255, 255), 1, 8, hierarchy, 0); \/\/ if you want to draw polygon covering the walls\n\tlet orig = keypts.data32S; \/\/ assuming keypts is a flat array\n\tlet rectM = cv.boundingRect(contours.get(i));\n  if (orig.length>8 || rectM.width\/rectM.height>=4 || rectM.width\/rectM.height<=0.25) {\n       let MomentWall = cv.moments(contours.get(i), false); M_Wall_x.push(MomentWall.mu20); M_Wall_y.push(MomentWall.mu02);\n         cx_Wall.push(cx_wall);     cy_Wall.push(cy_wall);   \n\t\tvar L3=[];\n\t\t  cv.putText(src, 'W'+wallCount, new cv.Point(orig[0] - 20, orig[1] - 10), cv.FONT_HERSHEY_TRIPLEX, 0.8, new cv.Scalar(255, 0, 0), 2);\n          let L1=rectM.width*1000\/rect.width; let L2=rectM.height*1000\/rect.width;\n           pID.push('W'+wallCount+' Lx'); pID.push('W'+wallCount+' Ly'); dim.push(L1); dim.push(L2); sn.push(wallCount); sn.push(wallCount);\n\t      for (let j = 0; j <= orig.length; j += 2) {\n            let pt1 = new cv.Point(orig[j - 2], orig[j - 1]);\n\t        let pt2 = new cv.Point(orig[j], orig[j + 1]);\n            L3.push((Math.sqrt(Math.pow((pt1.x - pt2.x), 2) + Math.pow((pt1.y - pt2.y), 2))\/rect.width)*1000);\n          }\n\t\t  dim.push(Math.min(...L3)); pID.push('W'+wallCount+' Thickness'); sn.push(wallCount);\n\t\t  wallIds.push(wallCount); wallCount++;\n\t\t  let walloutput1 = src.clone();\n          cv.cvtColor(walloutput1, walloutput1, cv.COLOR_GRAY2BGR);\n\t\t  cv.rectangle(walloutput1, new cv.Point(rectM.x, rectM.y), new cv.Point(rectM.x + rectM.width, rectM.y + rectM.height), new cv.Scalar(255, 0, 0), 2, cv.LINE_AA, 0);\n\t     let zoomedWall = walloutput1.roi(new cv.Rect(rectM.x, rectM.y, rectM.width, rectM.height));\n\t        \/\/ Set the margin sizes (adjust these values as needed)\n         const marginLeft = 30;  const marginBottom = 30; \n        \/\/ Create a new canvas with extra space for margins\n         let zoomedWallWithMargins = new cv.Mat(zoomedWall.rows + marginBottom, zoomedWall.cols + marginLeft, cv.CV_8UC3, new cv.Scalar(255, 255, 255)); \/\/ White background\n         zoomedWallWithMargins.setTo(new cv.Scalar(211, 211, 211));\n\t\t\/\/ Copy the zoomedWall into the new canvas, leaving margins on the left and bottom\n         zoomedWall.copyTo(zoomedWallWithMargins.roi(new cv.Rect(marginLeft, 0, zoomedWall.cols, zoomedWall.rows)));\n        \/\/ Add 'Lx' label at the bottom margin\n         cv.putText(zoomedWallWithMargins, 'Lx', new cv.Point(marginLeft + (zoomedWall.cols \/ 2), zoomedWallWithMargins.rows - 10), cv.FONT_HERSHEY_SIMPLEX, 0.6, new cv.Scalar(0, 0, 0), 2);\n        \/\/ Add 'Ly' label on the left margin\n         cv.putText(zoomedWallWithMargins, 'Ly', new cv.Point(5, zoomedWall.rows \/ 2), cv.FONT_HERSHEY_SIMPLEX, 0.6, new cv.Scalar(0, 0, 0), 2);\n         \/\/ Push the modified image (with margins) to wallImages\n         wallImages.push([zoomedWallWithMargins, rectM.x, rectM.y, rectM.width, rectM.height]);\t\t \n\t\t \n\t}\n\t\n}}\n\/\/ create wall options\/\/ Array of options\n    for (let i = 10; i >= wallIds.length+1; i--) {\n        document.getElementById('wallA').remove(i); document.getElementById('wallB').remove(i);\n    }\n\n\/\/ Display wall images\n        wallImages.forEach((wallImage, index) => {cv.imshow(`WallImage${index + 1}`, wallImage[0]);});\n\/\/ controlling input table rows length based on number of elements\n\/\/ Number of slides controlled by parameter n\n  const n = wallIds.length; \/\/ Change this value for more\/less slides\n  let currentSlide = 0; document.getElementById(`WallImage1`).style.display = \"block\"; \n  function createSlides(n) {\n    const slideWrapper = document.getElementById('slide-wrapper');\n    \n    \/\/ Create n slides\n    for (let i = 0; i < n; i++) {\n      const slideDiv = document.createElement('div');\n      slideDiv.className = 'slide-container';\n      slideDiv.id = `slide-${i}`;\n\t  \/\/ Create a canvas element for OpenCV display\n      slideDiv.innerHTML = `\n        <h3>Wall ${i + 1}<\/h3>\n         <table id=\"myTable1\">\n            <tr><td><\/td>\n              <td>Current Dimensions in mm<\/td>\n              <td>Make Changes in mm<\/td>\n            <\/tr>\n            <tr><td>Lx<\/td>\n              <td><input type=\"text\" name=\"dimension\"><\/td>\n              <td><input type=\"text\" name=\"Newdimension\"><\/td>\n            <\/tr>\n            <tr><td>Ly<\/td>\n              <td><input type=\"text\" name=\"dimension\"><\/td>\n              <td><input type=\"text\" name=\"Newdimension\"><\/td>\n            <\/tr>\n            <tr><td>Thickness<\/td>\n              <td><input type=\"text\" name=\"dimension\"><\/td>\n              <td><input type=\"text\" name=\"Newdimension\"><\/td>\n            <\/tr>\n          <\/table>\n      `;\n\t  \n      slideWrapper.appendChild(slideDiv); \n    }\n    \n    \/\/ Show the first slide\n    document.getElementById(`slide-${currentSlide}`).classList.add('active');\n  }\n \n  \/\/ Initialize slides\n  createSlides(n);\n  \n var Bvalue= Math.max(Math.abs(cx-rect.x),Math.abs(rect.width-(cx-rect.x)),rect.width\/2);\n  Br= Bvalue\/rr;\nvar total_I = kx2 +ky2;\n   ecc_y =eccent_x\/sumstiff_x;   ecc_x =eccent_y\/sumstiff_y;\n   \/\/calculate the position of CR   \n   CR_x =parseInt(cx+ecc_x);    CR_y =parseInt(cy+ecc_y);\n   br_CRy =Math.pow(total_I\/sumstiff_y-ecc_y*ecc_y,0.5)\/rr;  \/\/ \n   br_CRx = Math.pow(total_I\/sumstiff_x-ecc_x*ecc_x,0.5)\/rr;\n   exr = Math.abs(ecc_x)\/rr;    eyr = Math.abs(ecc_y)\/rr;\nlet rectCenterX = rect.x + rect.width \/ 2; let rectCenterY = rect.y + rect.height \/ 2; \/\/ Center point of the rectangle along the x and y-axis\nbottomCenter = new cv.Point(rectCenterX, rect.y + rect.height); \/\/ Center point of the bottom edge\ntopCenter = new cv.Point(rectCenterX, rect.y); \/\/ Center point of the top edge\nleftCenter = new cv.Point(rect.x, rectCenterY); \/\/ Center point of the left edge\nrightCenter = new cv.Point(rect.x + rect.width, rectCenterY); \/\/ Center point of the right edge\ncv.imshow('canvasCheck1',imageoutput1);  \/\/ Image for confirming that the boundary of the floor plan has been correctly identified\ncv.imshow('canvasCheck2',src); \/\/ Image for confirming that all the walls and columns are displayed\ncv.imshow('canvasCheck3',src); \/\/ Image for confirming that all the walls and columns are displayed\nsrc.delete(); contours.delete(); hierarchy.delete();  \/\/img.delete(); \n\/\/let perimeter = cv.arcLength(cnt, true); let encCircle = cv.minEnclosingCircle(cnt); let buildingLength=2*encCircle.radius;\n<\/script>\n\n<script type=\"text\/javascript\">\n\/\/all the opencv functions goes here\nlet utils = new Utils('errorMessage');\n\nutils.loadCode('codeSnippet', 'codeEditor');\nutils.addFileInputHandler('fileInput', 'canvasInput');\n\nlet tryIt = document.getElementById('tryIt');\ntryIt.addEventListener('click', () => {\n document.getElementById('afterScan').style.display='block';\n alert(\"Next, confirm that the red rectangle outlines the building. Also, select the direction of loading and the length of the red rectangle.\");\n    utils.executeCode('codeEditor');\n});\n\nutils.loadOpenCv(() => {\n    tryIt.removeAttribute('disabled');\n});\nfunction Utils(errorOutputId) { \/\/ eslint-disable-line no-unused-vars\n    let self = this;\n    this.errorOutput = document.getElementById(errorOutputId);\n\n    const OPENCV_URL = 'https:\/\/docs.opencv.org\/4.5.0\/opencv.js';\n    this.loadOpenCv = function(onloadCallback) {\n        let script = document.createElement('script');\n        script.setAttribute('async', '');\n        script.setAttribute('type', 'text\/javascript');\n        script.addEventListener('load', () => {\n                        onloadCallback();\n        });\n        script.addEventListener('error', () => {\n            self.printError('Failed to load ' + OPENCV_URL);\n        });\n        script.src = OPENCV_URL;\n        let node = document.getElementsByTagName('script')[0];\n        node.parentNode.insertBefore(script, node);\n    };\n\n    this.createFileFromUrl = function(path, url, callback) {\n        let request = new XMLHttpRequest();\n        request.open('GET', url, true);\n        request.responseType = 'arraybuffer';\n        request.onload = function(ev) {\n            if (request.readyState === 4) {\n                if (request.status === 200) {\n                    let data = new Uint8Array(request.response);\n                    cv.FS_createDataFile('\/', path, data, true, false, false);\n                    callback();\n                } else {\n                    self.printError('Failed to load ' + url + ' status: ' + request.status);\n                }\n            }\n        };\n        request.send();\n    };\n\n    this.loadImageToCanvas = function(url, canvasId) {\n        let canvas = document.getElementById(canvasId);\n        let ctx = canvas.getContext('2d');\n        let img = new Image();\n        img.crossOrigin = 'anonymous';\n        img.onload = function() {\n            canvas.width = img.width;\n            canvas.height = img.height;\n            ctx.drawImage(img, 0, 0, img.width, img.height);\n        };\n        img.src = url;\n    };\n\n    this.executeCode = function(textAreaId) {\n        try {\n            this.clearError();\n            let code = document.getElementById(textAreaId).value;\n\t\t\t\n            eval(code);\n        } catch (err) {\n            this.printError(err);\n        }\n    };\n\n    this.clearError = function() {\n        this.errorOutput.innerHTML = '';\n    };\n\n    this.printError = function(err) {\n        if (typeof err === 'undefined') {\n            err = '';\n        } else if (typeof err === 'number') {\n            if (!isNaN(err)) {\n                if (typeof cv !== 'undefined') {\n                    err = 'Exception: ' + cv.exceptionFromPtr(err).msg;\n                }\n            }\n        } else if (typeof err === 'string') {\n            let ptr = Number(err.split(' ')[0]);\n            if (!isNaN(ptr)) {\n                if (typeof cv !== 'undefined') {\n                    err = 'Exception: ' + cv.exceptionFromPtr(ptr).msg;\n                }\n            }\n        } else if (err instanceof Error) {\n            err = err.stack.replace(\/\\n\/g, '<br>');\n        }\n        this.errorOutput.innerHTML = err;\n    };\n\n    this.loadCode = function(scriptId, textAreaId) {\n        let scriptNode = document.getElementById(scriptId);\n        let textArea = document.getElementById(textAreaId);\n        if (scriptNode.type !== 'text\/code-snippet') {\n            throw Error('Unknown code snippet type');\n        }\n        textArea.value = scriptNode.text.replace(\/^\\n\/, '');\n    };\n\n    this.addFileInputHandler = function(fileInputId, canvasId) {\n        let inputElement = document.getElementById(fileInputId);\n        inputElement.addEventListener('change', (e) => {\n            let files = e.target.files;\n            if (files.length > 0) {\n                let imgUrl = URL.createObjectURL(files[0]);\n                self.loadImageToCanvas(imgUrl, canvasId);\n            }\n        }, false);\n    };\n\n    function onVideoCanPlay() {\n        if (self.onCameraStartedCallback) {\n            self.onCameraStartedCallback(self.stream, self.video);\n        }\n    };\n\n    this.startCamera = function(resolution, callback, videoId) {\n        const constraints = {\n            'qvga': {width: {exact: 320}, height: {exact: 240}},\n            'vga': {width: {exact: 640}, height: {exact: 480}}};\n        let video = document.getElementById(videoId);\n        if (!video) {\n            video = document.createElement('video');\n        }\n\n        let videoConstraint = constraints[resolution];\n        if (!videoConstraint) {\n            videoConstraint = true;\n        }\n\n        navigator.mediaDevices.getUserMedia({video: videoConstraint, audio: false})\n            .then(function(stream) {\n                video.srcObject = stream;\n                video.play();\n                self.video = video;\n                self.stream = stream;\n                self.onCameraStartedCallback = callback;\n                video.addEventListener('canplay', onVideoCanPlay, false);\n            })\n            .catch(function(err) {\n                self.printError('Camera Error: ' + err.name + ' ' + err.message);\n            });\n    };\n\n    this.stopCamera = function() {\n        if (this.video) {\n            this.video.pause();\n            this.video.srcObject = null;\n            this.video.removeEventListener('canplay', onVideoCanPlay);\n        }\n        if (this.stream) {\n            this.stream.getVideoTracks()[0].stop();\n        }\n    };\n};\n<\/script>\n\n<script type=\"text\/javascript\">  function open_file(){  document.getElementById(\"showbtn\").style.display= \"block\";}<\/script>\n<script type=\"text\/javascript\">  function box1(){ systemType=1; document.getElementById(\"showSlab\").style.display= \"block\"; document.getElementById(\"showBeamA\").style.display= \"none\";document.getElementById(\"type1\").style.backgroundColor= \"green\";document.getElementById(\"type3\").style.backgroundColor= \"white\";}<\/script>\n<script type=\"text\/javascript\">  function box3(){ systemType=3; document.getElementById(\"showSlab\").style.display= \"block\"; document.getElementById(\"showBeamA\").style.display= \"block\";document.getElementById(\"type3\").style.backgroundColor= \"green\";document.getElementById(\"type1\").style.backgroundColor= \"white\";}<\/script>\n<script type=\"text\/javascript\"> \n  document.getElementById(\"showinp\").addEventListener(\"click\", function(button) {    \n  document.getElementById(\"inp\").style.display = \"block\";\n  \/\/ Define tick properties\nlet imageoutput12 = imageoutput11.clone();\nvar Length=document.getElementById(\"length\").value;\nlet numTicksX = 5; \/\/ Number of ticks on the top and bottom edges\nlet numTicksY = 5; \/\/ Number of ticks on the left and right edges\nlet tickLength = 10; \/\/ Length of each tick line\nlet fontScale = 0.9; \/\/ Scale for tick labels\nlet fontColor = new cv.Scalar(255, 255, 255); \/\/ White color for the labels\nlet tickThickness = 2;\n\n\/\/ Draw ticks and labels along the top and bottom edges\nfor (let i = 0; i <= numTicksX; i++) {\n    let x = rect.x + (i * rect.width) \/ numTicksX;\n\n    \/\/ Top edge tick and label\n    cv.line(\n        imageoutput12,\n        new cv.Point(x, rect.y),\n        new cv.Point(x, rect.y - tickLength),\n        new cv.Scalar(255, 255, 255), \/\/ White color for ticks\n        tickThickness\n    );\n    cv.putText(\n        imageoutput12,\n        `${(i*Length\/5).toFixed(1)}`, \/\/ Label value\n        new cv.Point(x - 5, rect.y - tickLength - 15), \n        cv.FONT_HERSHEY_DUPLEX,\n        fontScale,\n        fontColor, \n        3\n    );\n\n    \/\/ Bottom edge tick and label\n    cv.line(\n        imageoutput12,\n        new cv.Point(x, rect.y + rect.height),\n        new cv.Point(x, rect.y + rect.height + tickLength),\n        new cv.Scalar(255, 255, 255), \/\/ White color for ticks\n        tickThickness\n    );\n    cv.putText(\n        imageoutput12,\n        `${(i*Length\/5).toFixed(1)}`,\n        new cv.Point(x - 5, rect.y + rect.height + tickLength + 35), \/\/ Position the text\n        cv.FONT_HERSHEY_SIMPLEX,\n        fontScale,\n        fontColor, \/\/ White color for text\n        3\n    );\n}\n\/\/ Draw ticks and labels along the left and right edges\nfor (let j = 0; j <= numTicksY; j++) {\n    let y = rect.y + (j * rect.height) \/ numTicksY;\n\n    \/\/ Calculate the reversed label (so that 0 is at the bottom)\n    let labelValue = ((numTicksY - j) * Length * rect.height) \/ (5 * rect.width);\n\n    \/\/ Left edge tick and label\n    cv.line(\n        imageoutput12,\n        new cv.Point(rect.x, y),\n        new cv.Point(rect.x - tickLength, y),\n        new cv.Scalar(255, 255, 255), \/\/ White color for ticks\n        tickThickness\n    );\n    cv.putText(\n        imageoutput12,\n        `${labelValue.toFixed(1)}`,\n        new cv.Point(rect.x - tickLength - 75, y + 5), \/\/ Position the text\n        cv.FONT_HERSHEY_SIMPLEX,\n        fontScale,\n        fontColor, \/\/ White color for text\n        3\n    );\n\n    \/\/ Right edge tick and label\n    cv.line(\n        imageoutput12,\n        new cv.Point(rect.x + rect.width, y),\n        new cv.Point(rect.x + rect.width + tickLength, y),\n        new cv.Scalar(255, 255, 255), \/\/ White color for ticks\n        tickThickness\n    );\n    cv.putText(\n        imageoutput12,\n        `${labelValue.toFixed(1)}`,\n        new cv.Point(rect.x + rect.width + tickLength + 5, y + 5), \/\/ Position the text\n        cv.FONT_HERSHEY_SIMPLEX,\n        fontScale,\n        fontColor, \/\/ White color for text\n        3\n    );\n}\n\n\ncv.imshow('canvasCheck11',imageoutput12);\ncv.imshow('canvasCheck3D',imageoutput12);\nimageoutput12 = [];\n\n  alert(\"Next, confirm the dimensions of the building.\");\n  }); \nfunction open1(){ \ndocument.getElementById(\"showit\").style.display= \"block\"; alert(\"Next, confirm the dimension of the structural elements. If the dimensions shown are not correct, provide the correct dimensions.\");\nvar length=document.getElementById('length').value;\nfor(var j=0; j<dim.length; j++){\n      document.getElementsByName('dimension')[j].value = Math.round(dim[j]*length);\t  \n  }\n \/\/ Function to populate checkboxes with wall IDs\n        function populateCheckboxes(wallIds) {\n            const container = $('#wallSelection');\n            container.empty(); \/\/ Clear existing checkboxes\n\n            wallIds.forEach(wallId => {\n                const checkboxHtml = `<label class=\"checkbox-item\"><input type=\"checkbox\" value=\"${wallId}\" class=\"wall-checkbox\"> ${wallId}<\/label>`;\n                container.append(checkboxHtml); \/\/ Add checkbox to container\n            });\n        }\n\n        $(document).ready(function() {\n            populateCheckboxes(wallIds);\n\t\t\t$('#wallSelection').on('change', '.wall-checkbox', function() {\n                const selectedValues = $('#wallSelection .wall-checkbox:checked').map(function() {return $(this).val();}).get();});  \n\t\t\t\t\/\/array selectedValues is used while considering the effect of setback or podium\n\t\t});\n}\n<\/script>\n<script type=\"text\/javascript\">  function open2(){document.getElementById(\"inp1\").style.display= \"block\";\nalert(\"Next, select the type of structural system from the given options.\");\n}<\/script>\n<script>\nfunction EnterCoupling() {\nif(document.getElementById(\"wallA\").value==0){alert(\"You haven't defined wall A.\");}\nelse if(document.getElementById(\"wallB\").value==0){alert(\"You haven't defined wall B.\");}\nelse if(document.getElementById(\"wallB\").value==document.getElementById(\"wallA\").value){alert(\"You have defined the same wall for coupling. Coupling needs to be defined between two different walls: Wall A and Wall B.\");}\nelse {alert(\"If you have more than 1 coupled walls, press ADD to define them.\");\n       document.getElementById(\"ADD\").style.display = \"block\"; document.getElementById(\"ENTER\").remove();\n     }\n}\n    function addRow() {\n\t\n        const table = document.getElementById('coupledBeamsTable');\n\t\tconst newRow = document.getElementById('firstRow').cloneNode(true); \/\/ Clone the first row\n     \/\/ Loop through the selects and reset to the default value\n        const selects = newRow.getElementsByTagName('select');\n        for (let i = 0; i < selects.length; i++) {\n            selects[i].selectedIndex = 0; \/\/ Set to the first option\n        }\n\n        \/\/ Find the button in the new row and remove it\n        const button = newRow.querySelector('button');\n        if (button) {\n           button.remove(); \/\/ Remove the Add button from the cloned row\n        }\n\n        table.appendChild(newRow); \/\/ Add the new row to the table\n    }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>QUAKE ADVICE_Seismic Analysis by Generalised Force Method (GFM) Seismic Analysis by Rapid Dynamic Analysis (RDA) 1. Input Parameters: Specify if the building has any setback or podium features: SelectThere is no setback or podium featureYes, there is setback featureYes, there is podium feature A. Upload the Building&#8217;s Floor Plan (for the Typical Floor): A. Upload &hellip; <a href=\"http:\/\/quakeadvice.org\/index.php\/code-seismic-design\/malaysia\/program-my2\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1202,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"template-full-width.php","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1229","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/pages\/1229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/comments?post=1229"}],"version-history":[{"count":10,"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/pages\/1229\/revisions"}],"predecessor-version":[{"id":2082,"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/pages\/1229\/revisions\/2082"}],"up":[{"embeddable":true,"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/pages\/1202"}],"wp:attachment":[{"href":"http:\/\/quakeadvice.org\/index.php\/wp-json\/wp\/v2\/media?parent=1229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}