{"id":14839,"date":"2025-11-21T05:26:26","date_gmt":"2025-11-21T05:26:26","guid":{"rendered":"https:\/\/ganapathys126.sg-host.com\/?page_id=14839"},"modified":"2025-11-21T10:52:16","modified_gmt":"2025-11-21T10:52:16","slug":"tutorial","status":"publish","type":"page","link":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/","title":{"rendered":"Tutorial"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"14839\" class=\"elementor elementor-14839\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-513ea5d e-flex e-con-boxed e-con e-parent\" data-id=\"513ea5d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e6fe1d elementor-widget elementor-widget-text-editor\" data-id=\"1e6fe1d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"wf-section\">\n          <div class=\"w-embed w-script\">\n            <script>\n          window.onload = function() {\n          var BTN_1 = document.getElementById('click-button');\n          var BTN_2 = document.getElementById('right-click-button');\n          var BTN_3 = document.getElementById('dbl-click-button');\n          var BTN_4 = document.getElementById('wait-btn');\n          var BTN_5 = document.getElementById('logo-btn');\n          var IMG_1 = document.getElementById('img-2043');\n          var IMG_2 = document.getElementById('img-2044');\n          var RED = document.getElementById('Red');\n          var YELLOW = document.getElementById('Yellow');\n          var BLUE = document.getElementById('Blue');\n          var CLR_BOX = document.getElementById('color-display');\n          var SMOKE = document.getElementById('Smoke Test');\n          var FUNC = document.getElementById('Functional Test');\n          var INT = document.getElementById('Integration Test');\n          var UNIT = document.getElementById('Unit Test');\n          var ACCEPT = document.getElementById('Acceptance Test');\n          var SMOKE_ITEM = document.getElementById('smoke-list-item');\n          var FUNC_ITEM = document.getElementById('func-list-item');\n          var INT_ITEM = document.getElementById('integration-list-item');\n          var UNIT_ITEM = document.getElementById('unit-list-item');\n          var ACCEPT_ITEM = document.getElementById('acceptance-list-item');\n          var SUBMIT = document.getElementById('submit-button');\n          var NNAME = document.getElementById('nickName');\n          var PNAME = document.getElementById('petName');\n          var ANIMAL = document.getElementById('animal');\n          var FAV_COLOR = \"\";\n          const TESTS_ARRAY = [];\n          var NICK = \"\";\n          var PET_NICK = \"\";\n          var FAV_ANIMAL = \"\";\n          BTN_4.onclick = waitBtn;\n          function waitBtn() {\n            setTimeout(function() {\n                BTN_5.className = '';\n                BTN_5.classList.add('div-block-2046')\n            }, 5000);\n          }\n          BTN_5.onclick = loadNewLogo\n          function loadNewLogo() {\n            IMG_1.classList.add('hidden');\n            IMG_2.className = '';\n            IMG_2.classList.add('image-2044');\n          }\n          SUBMIT.onclick = clearInput;\n          function clearInput() {\n              if (NNAME.value != \"\"){\n                NICK = NNAME.value;\n                NNAME.value = \"\";\n            }\n            if (PNAME.value != \"\"){\n                PET_NICK = PNAME.value;\n                PNAME.value = \"\";\n            }\n            if (ANIMAL.value != \"Select Favorite Animal...\"){\n                FAV_ANIMAL = ANIMAL.value;\n                ANIMAL.value = \"Select Favorite Animal...\";\n            }\n            alert(\"Submission complete! Your nickname: \" + NICK + \";  Your pet's name: \" + PET_NICK + \";  Favorite animal: \" + FAV_ANIMAL + \";  Favorite color: \" + FAV_COLOR + \";  Tests chosen: \" + TESTS_ARRAY);\n            if(SMOKE.checked){\n                SMOKE.checked=false;\n              SMOKE_ITEM.classList.add(\"hidden\");\n              TESTS_ARRAY.length=0;\n            }\n            if(FUNC.checked){\n                FUNC.checked=false;\n              FUNC_ITEM.classList.add(\"hidden\");\n              TESTS_ARRAY.length=0;\n            }\n            if(INT.checked){\n                INT.checked=false;\n              INT_ITEM.classList.add(\"hidden\");\n              TESTS_ARRAY.length=0;\n            }\n            if(UNIT.checked){\n                UNIT.checked=false;\n              UNIT_ITEM.classList.add(\"hidden\");\n              TESTS_ARRAY.length=0;\n            }\n            if(ACCEPT.checked){\n                ACCEPT.checked=false;\n              ACCEPT_ITEM.classList.add(\"hidden\");\n              TESTS_ARRAY.length=0;\n            }\n            if(RED.checked || YELLOW.checked || BLUE.checked){\n              CLR_BOX.className = '';\n              CLR_BOX.classList.add('div-block-2048');\n              RED.checked = false;\n              BLUE.checked = false;\n              YELLOW.checked = false;\n            }\n          }\n          SMOKE.onclick = smokeCheck;\n          FUNC.onclick = funcCheck;\n          INT.onclick = intCheck;\n          UNIT.onclick = unitCheck;\n          ACCEPT.onclick = acceptCheck;\n          function smokeCheck() {\n              if(SMOKE.checked){\n                SMOKE_ITEM.className = '';\n              SMOKE_ITEM.classList.add(\"text\");\n              TESTS_ARRAY.push(SMOKE.value);\n              console.log(TESTS_ARRAY);\n            }else{\n                SMOKE_ITEM.classList.add(\"hidden\");\n              for (var i = TESTS_ARRAY.length - 1; i >= 0; i--) {\n                if (TESTS_ARRAY[i] === SMOKE.value) {\n                  TESTS_ARRAY.splice(i, 1);\n                }\n              }\n              console.log(TESTS_ARRAY);\n            }\n          }\n          function funcCheck() {\n              if(FUNC.checked){\n                FUNC_ITEM.className = '';\n              FUNC_ITEM.classList.add(\"text\");\n              TESTS_ARRAY.push(FUNC.value);\n              console.log(TESTS_ARRAY);\n            }else{\n                FUNC_ITEM.classList.add(\"hidden\");\n              for (var i = TESTS_ARRAY.length - 1; i >= 0; i--) {\n                if (TESTS_ARRAY[i] === FUNC.value) {\n                  TESTS_ARRAY.splice(i, 1);\n                }\n              }\n              console.log(TESTS_ARRAY);\n            }\n          }\n          function intCheck() {\n              if(INT.checked){\n                INT_ITEM.className = '';\n              INT_ITEM.classList.add(\"text\");\n              TESTS_ARRAY.push(INT.value);\n              console.log(TESTS_ARRAY);\n            }else{\n                INT_ITEM.classList.add(\"hidden\");\n              for (var i = TESTS_ARRAY.length - 1; i >= 0; i--) {\n                if (TESTS_ARRAY[i] === INT.value) {\n                  TESTS_ARRAY.splice(i, 1);\n                }\n              }\n              console.log(TESTS_ARRAY);\n            }\n          }\n          function unitCheck() {\n              if(UNIT.checked){\n                UNIT_ITEM.className = '';\n              UNIT_ITEM.classList.add(\"text\");\n              TESTS_ARRAY.push(UNIT.value);\n              console.log(TESTS_ARRAY);\n            }else{\n                UNIT_ITEM.classList.add(\"hidden\");\n              for (var i = TESTS_ARRAY.length - 1; i >= 0; i--) {\n                if (TESTS_ARRAY[i] === UNIT.value) {\n                  TESTS_ARRAY.splice(i, 1);\n                }\n              }\n              console.log(TESTS_ARRAY);\n            }\n          }\n          function acceptCheck() {\n              if(ACCEPT.checked){\n                ACCEPT_ITEM.className = '';\n              ACCEPT_ITEM.classList.add(\"text\");\n              TESTS_ARRAY.push(ACCEPT.value);\n              console.log(TESTS_ARRAY);\n            }else{\n                ACCEPT_ITEM.classList.add(\"hidden\");\n              for (var i = TESTS_ARRAY.length - 1; i >= 0; i--) {\n                if (TESTS_ARRAY[i] === ACCEPT.value) {\n                  TESTS_ARRAY.splice(i, 1);\n                }\n              }\n              console.log(TESTS_ARRAY);\n            }\n          }\n          function singleClick() {\n                  alert('You performed a single click!');\n          }\n          function rightClick() {\n                  alert('You performed a right click!');\n            return false;\n          }\n          function dblClick() {\n              alert('You performed a double click!');\n          }\n          BTN_1.onclick = singleClick;\n          BTN_2.oncontextmenu = rightClick;\n          BTN_3.ondblclick = dblClick;\n          RED.onclick = checkColor;\n          YELLOW.onclick = checkColor;\n          BLUE.onclick = checkColor;\n          function checkColor() {\n            if(RED.checked){\n                FAV_COLOR = RED.value;\n              CLR_BOX.className = '';\n              CLR_BOX.classList.add('div-block-2048');\n              CLR_BOX.classList.add('red-back');\n            }else if(YELLOW.checked){\n                FAV_COLOR = YELLOW.value;\n              CLR_BOX.className = '';\n              CLR_BOX.classList.add('div-block-2048');\n              CLR_BOX.classList.add('yellow-back');\n            }else if(BLUE.checked){\n                FAV_COLOR = BLUE.value;\n              CLR_BOX.className = '';\n              CLR_BOX.classList.add('div-block-2048');\n              CLR_BOX.classList.add('blue-back');\n            }\n          }\n        }\n      <\/script>\n          <\/div>\n          <div class=\"w-embed\">\n            <style>\n                .display-block{\n                    display:block;\n                }\n                .container{\n                  display: flex;\n                }\n                .col{\n                    flex-direction: column;\n                }\n                .hor-col{\n                  flex-direction: row;\n                }\n                .bs{\n                    align-items: baseline;\n                }\n                .radio-item{\n                    margin-left: 5px;\n                }\n                #color-display, #list-display{\n                  display: flex;\n                  flex-direction: column;\n                  justify-content: center;\n                  border: 2px solid #1D1E1F;\n                  border-radius: 10px;\n                  width: 50%;\n                  margin: 0 20px 0 20px;\n                  min-height: fit-content;\n                  height: 100%;\n                  }\n                .box{\n                    width: 100%;\n                    height: 40vh;\n                  margin: 0 0 50px 0;\n                  justify-content: space-between;\n                }\n                .red-back{\n                    background-color: red;\n                }\n                .yellow-back{\n                    background-color: yellow;\n                }\n                .blue-back{\n                    background-color: blue;\n                }\n                .hidden{\n                    display: none !important;\n                }\n                #smoke-list-item, #func-list-item, #integration-list-item, #unit-list-item, #acceptance-list-item{\n                  margin-left: 10px;\n                  font-size: 12px;\n                    &:before{\n                      content: \"- \"\n                  }\n                }\n                .input{\n                  border: 1px solid darkgrey;\n                  font-size: 16px;\n                  line-height: 26px;\n                  letter-spacing: 0.8px;\n                  padding: 10px 10px 10px 10px;\n                  border-radius: 5px;\n                  }\n                .input{\n                  width: 100%;\n                  align-self: center;\n                  }\n                .i-label{\n                  align-self: center;\n                  }\n                #nickName{\n                  margin: 0 0 25px 0;\n                }\n                #petName{\n                    margin: 0 0 25px 0;\n                }\n                #animal{\n                    margin: 0 0 25px 0;\n                }\n                #submit-button{\n                  width: fit-content;\n                  align-self: center;\n                  border-radius: 10px;\n                  width: 100%;\n                  background-color: #00538F;\n                  padding: 10px 0 10px 0;\n                  color: white;\n                  &:active{\n                      background-color: #2EC25F;\n                    color: black;\n                  }\n                  }\n                  .column-2090 {\n                        flex-direction: column;\n                        align-items: flex-start;\n                        display: flex;\n                    }\n                    \n                    .column-2090.horiz {\n                        flex-direction: row;\n                        justify-content: space-between;\n                        margin-bottom: 10px;\n                    }\n                    \n                    .div-block-2072 {\n                        width: 35%;\n                        justify-content: center;\n                        align-self: stretch;\n                        align-items: center;\n                        display: flex;\n                    }\n                    \n                    .free-trial-button {\n                        width: 125px;\n                        color: #000;\n                        text-align: center;\n                        background-color: #ffc600;\n                        border-radius: 5px;\n                        margin-right: 20px;\n                    }\n                    \n                    .free-trial-button.y-gradient-back {\n                        width: 150px;\n                        background-color: #ffcf00;\n                        background-image: url('..\/images\/Rectangle-8446.png');\n                        background-position: 50%;\n                        background-repeat: no-repeat;\n                        background-size: cover;\n                        margin-top: 25px;\n                        font-size: 16px;\n                        line-height: 28px;\n                    }\n                    \n                    .section-2010 {\n                        background-image: url('..\/images\/bg_header_small.png');\n                        background-position: 50%;\n                        background-repeat: no-repeat;\n                        background-size: cover;\n                        padding-top: 10px;\n                        padding-bottom: 20px;\n                        display: block;\n                    }\n                    \n                    .image-2059 {\n                        width: auto;\n                    }\n                    \n                    .div-block-2073 {\n                        width: 65%;\n                    }\n                    \n                    .text-block-2076 {\n                        max-width: 50%;\n                        color: #fff;\n                        font-size: 16px;\n                        font-weight: 300;\n                        line-height: 30px;\n                    }\n                    \n                    .text-block-2076.horiz {\n                        width: 90%;\n                        max-width: 90%;\n                    }\n                    \n                    .heading-2028 {\n                        color: #fff;\n                        font-size: 40px;\n                        font-weight: 300;\n                    }\n                    \n                    .heading-2029 {\n                        color: #01589c;\n                        background-color: rgba(0, 0, 0, 0);\n                        align-self: center;\n                        margin-top: 0;\n                        margin-bottom: 0;\n                        padding-left: 0;\n                    }\n                    \n                    .section-20119 {\n                        flex-direction: row;\n                        justify-content: space-around;\n                        margin-top: 20px;\n                        margin-right: 0;\n                        display: flex;\n                    }\n                    \n                    .form {\n                        height: 40vh;\n                        flex-direction: row;\n                        justify-content: space-around;\n                        display: flex;\n                    }\n                    \n                    .text-field {\n                        width: 40vw;\n                        height: 50vh;\n                        border: 2px solid #fcc50d;\n                        border-radius: 5px;\n                        order: 1;\n                        align-self: stretch;\n                        margin-top: 10px;\n                    }\n                    \n                    .text-field-2 {\n                        width: 40vw;\n                        height: 50vh;\n                        object-fit: cover;\n                        border: 2px solid #fcc50d;\n                        border-radius: 5px;\n                        flex: 0 auto;\n                        align-self: stretch;\n                        margin-top: 10px;\n                        overflow: auto;\n                    }\n                    \n                    .textarea {\n                        width: 45vw;\n                        height: auto;\n                        border: 2.5px solid #fcc50d;\n                        border-radius: 5px;\n                        flex: none;\n                        margin-top: 10px;\n                        margin-bottom: 0;\n                    }\n                    \n                    .button {\n                        margin-bottom: 20px;\n                        margin-left: 280px;\n                        display: inline-block;\n                    }\n                    \n                    .section-20119-copy {\n                        flex-direction: row;\n                        justify-content: space-between;\n                        display: flex;\n                    }\n                    \n                    .form-copy {\n                        height: 10vh;\n                        flex-direction: row;\n                        justify-content: flex-start;\n                        margin-left: 0;\n                        display: flex;\n                    }\n                    \n                    .textarea-copy {\n                        width: 45vw;\n                        height: auto;\n                        object-fit: contain;\n                        border: 2.5px solid #fcc50d;\n                        border-radius: 5px;\n                        flex: none;\n                        margin-top: 10px;\n                        margin-left: 20px;\n                    }\n                    \n                    .section-2012-copy {\n                        align-items: center;\n                        display: flex;\n                    }\n                    \n                    .heading-2029-copy {\n                        color: #01589c;\n                        background-color: rgba(0, 0, 0, 0);\n                        align-self: center;\n                        margin-top: 0;\n                        margin-bottom: 10px;\n                        padding-left: 40px;\n                    }\n                    \n                    .button-copy, .button-copy-copy {\n                        border-radius: 5px;\n                        margin-bottom: 20px;\n                        margin-left: 20px;\n                        display: inline-block;\n                    }\n                    \n                    .form-2 {\n                        margin-top: 20px;\n                        display: flex;\n                    }\n                    \n                    .text-field-3 {\n                        width: 30vw;\n                        height: auto;\n                        margin-bottom: 0;\n                    }\n                    \n                    .field-label {\n                        color: #01589c;\n                        margin-bottom: 0;\n                        margin-left: 20px;\n                        margin-right: 15px;\n                        font-size: 18px;\n                    }\n                    \n                    .submit-button {\n                        border-radius: 5px;\n                        margin-left: 15px;\n                    }\n                    \n                    .form-2-copy {\n                        margin-top: 20px;\n                        margin-left: 12px;\n                        display: flex;\n                    }\n                    \n                    .button-2 {\n                        height: 35px;\n                        border-radius: 5px;\n                        align-items: center;\n                        margin-top: 100px;\n                        display: flex;\n                    }\n                    \n                    .div-block-2045 {\n                        justify-content: center;\n                        margin-bottom: 25px;\n                        display: flex;\n                    }\n                    \n                    .button-2008 {\n                        border-right: 1px solid #fff;\n                    }\n                    \n                    .list-item-5 {\n                        display: none;\n                    }\n                    \n                    .column-2046 {\n                        justify-content: space-around;\n                        align-items: flex-start;\n                        display: flex;\n                    }\n                    \n                    .list {\n                        height: 100%;\n                        flex-direction: column;\n                        justify-content: space-around;\n                        display: flex;\n                    }\n                    \n                    .select-field {\n                        width: 50%;\n                        background-color: #fff;\n                        align-self: center;\n                    }\n                    \n                    .form-3 {\n                        flex-direction: column;\n                        display: flex;\n                    }\n                    \n                    .button-2007 {\n                        border-right: 1px solid #fff;\n                    }\n                    \n                    .div-block-2048 {\n                        width: 250px;\n                        height: 250px;\n                        border: 2px solid #000;\n                        border-radius: 8px;\n                    }\n                    \n                    .div-block-2046 {\n                        width: 15%;\n                        cursor: pointer;\n                        background-color: #00538F;\n                        border-radius: 8px;\n                        margin-bottom: 25px;\n                    }\n                    \n                    .text-field-4 {\n                        width: 50%;\n                        align-self: center;\n                    }\n                    \n                    .columns-22 {\n                        margin-bottom: 50px;\n                    }\n                    \n                    .image-2043 {\n                        width: 25%;\n                        margin-bottom: 50px;\n                    }\n                    \n                    .text-block-2047 {\n                        margin-bottom: 12px;\n                        font-size: 20px;\n                        font-weight: 500;\n                        line-height: 26px;\n                    }\n                    \n                    .div-block-2047 {\n                        flex-direction: column;\n                        justify-content: center;\n                        align-items: flex-start;\n                        display: flex;\n                    }\n                    \n                    .image-2044 {\n                        width: 25%;\n                        margin-bottom: 50px;\n                    }\n                    \n                    .column-2045 {\n                        flex-direction: column;\n                        justify-content: center;\n                        align-items: center;\n                        display: flex;\n                    }\n                    \n                    .submit-button-2 {\n                        background-color: #007ed9;\n                        border-radius: 8px;\n                        align-self: center;\n                    }\n                    \n                    .column-2047 {\n                        justify-content: space-around;\n                        align-items: flex-start;\n                        display: flex;\n                    }\n                    \n                    .button-2009 {\n                        border-top-right-radius: 8px;\n                        border-bottom-right-radius: 8px;\n                    }\n                    \n                    .form-block {\n                        width: 100%;\n                        flex-direction: column;\n                    }\n                    \n                    .div-block-2049 {\n                        width: 250px;\n                        height: 250px;\n                        border: 2px solid #000;\n                        border-radius: 8px;\n                        justify-content: center;\n                        align-items: center;\n                        display: block;\n                    }\n                    \n                    .field-label-2 {\n                        align-self: center;\n                        font-weight: 500;\n                    }\n                    \n                    .button-2006 {\n                        border-right: 1px solid #fff;\n                        border-top-left-radius: 8px;\n                        border-bottom-left-radius: 8px;\n                    }\n                    \n                    .div-block-2074 {\n                        width: 100%;\n                        flex-direction: column;\n                        align-items: stretch;\n                        display: flex;\n                    }\n                    \n                    .columns-23 {\n                        margin-bottom: 50px;\n                        display: flex;\n                        justify-content: space-evenly;\n                    }\n\n                    .w-col{\n                        width:100%;\n                    }\n                    \n                    .column-2091 {\n                        justify-content: space-around;\n                        align-items: flex-start;\n                        display: flex;\n                    }\n                    \n                    .div-block-2075 {\n                        width: 100%;\n                        flex-direction: column;\n                        justify-content: center;\n                        align-items: stretch;\n                        display: flex;\n                    }\n                    \n                    .html-embed {\n                        width: 100%;\n                    }\n                    \n                    .html-embed-2 {\n                        width: 80%;\n                        flex-direction: column;\n                        justify-content: center;\n                        align-items: stretch;\n                        display: flex;\n                    }\n                    \n                    .div-block-2076 {\n                        flex-direction: column;\n                        align-items: center;\n                        margin-bottom: 20px;\n                        display: flex;\n                    }\n                    \n                    .body {\n                        background-color: rgba(0, 126, 217, .21);\n                    }\n\n                    .w-button{\n                        padding: 15px 9px 15px 9px;\n                        background-color: #00538F;\n                        color: white;\n                        text-decoration: none;\n                        font-family: Arial, Helvetica, sans-serif;\n                        cursor: pointer;\n                    }\n                    .text{\n                        font-family: Arial, Helvetica, sans-serif;\n                    }\n                    .w-iframe{\n                        margin-top: 20px;\n                    }\n                    .head{\n                      text-align: center;\n                    }\n                    .con{\n                      display: flex;\n                    }\n                    .coll{\n                      display: flex;\n                      width: 50%;\n                    }\n                    .black-text{\n                      color: black;\n                      padding: 10px;\n                    }\n                    .red-text{\n                      color: red;\n                      margin-left: -50%;\n                      margin-top: 2px;\n                      padding: 10px;\n                    }\n                    .con{\n                      display: flex;\n                    }\n                    .dbox{\n                      padding: 100px 0 200px 0;\n                      background-color: black;\n                      width: 100%;\n                    }\n                    .boxx{\n                      margin: 10px;\n                    }\n                    .white-text{\n                      font-size:large;\n                      color: white;\n                    }\n                    .dm-button{\n                      padding: 5px;\n                      color: black;\n                      background-color: white;\n                      width: 100%;\n                      border-radius: 5px;\n                      border-color: black;\n                      border: 1px solid;\n                      margin: 5px;\n                      text-align: center;\n                      &:active{\n                        background-color: grey;\n                      }\n                    }\n                    .dm-2{\n                      background-color: transparent;\n                      color: #6200EE;\n                      border-color: white;\n                      border: 1px solid;\n                    }\n                    .dm-3{\n                      background-color: transparent;\n                      color: #BB86FC;\n                      border-color: white;\n                      border: 1px solid;\n                    }\n                    .dm-4{\n                      color: #F2E7FE;\n                    }\n                    .button-con{\n                      display: flex;\n                      width: 100%;\n                    }\n                    .dbox2{\n                      padding: 25px 0 25px 0;\n                      background-color: black;\n                      width: 100%;\n                    }\n                    @media screen and (max-width: 991px) {\n                        .div-block-2072 {\n                        display: none;\n                        }\n                    \n                        .free-trial-button {\n                        min-width: 125px;\n                        }\n                    \n                        .div-block-2073 {\n                        width: 100%;\n                        }\n                    \n                        .text-block-2076.horiz {\n                        max-width: 90%;\n                        }\n                    \n                        .column-2046 {\n                        flex-direction: row;\n                        display: flex;\n                        }\n                    }\n                    \n                    @media screen and (max-width: 767px) {\n                        .text-block-2076 {\n                        max-width: 100%;\n                        }\n                    \n                        .text-block-2076.horiz {\n                        width: 100%;\n                        max-width: 100%;\n                        }\n                    }\n                    \n                    @media screen and (max-width: 479px) {\n                        .column-2090 {\n                        align-items: stretch;\n                        }\n                    \n                        .free-trial-button {\n                        width: 225px;\n                        margin-bottom: 20px;\n                        margin-right: 0;\n                        }\n                    \n                        .free-trial-button.y-gradient-back {\n                        width: auto;\n                        align-self: stretch;\n                        margin-bottom: 0;\n                        }\n                    \n                        .text-block-2076 {\n                        width: auto;\n                        text-align: center;\n                        flex-direction: row;\n                        justify-content: center;\n                        align-items: center;\n                        display: block;\n                        }\n                    \n                        .heading-2028 {\n                        text-align: center;\n                        justify-content: center;\n                        align-self: center;\n                        align-items: center;\n                        display: flex;\n                        overflow: visible;\n                        }\n                    }\n\n.addtoany_shortcode, .content-single__info, .m-block, .m-posts, .blog-breadcrumb, .single-post-style-1 {\n  display: none !important;\n}\n              <\/style>\n          <\/div>\n          <div class=\"w-row\">\n            <div class=\"w-col w-col-1\"><\/div>\n            <div class=\"column-2045 w-col w-col-10\">\n              <h1 class=\"text\">Tutorial Test Page<\/h1><img decoding=\"async\" src=\"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg\" loading=\"lazy\" data-w-id=\"cacdb9d7-0d28-cab4-3bac-f8924fa81280\" alt=\"\" class=\"image-2043\" id=\"img-2043\"><img decoding=\"async\" src=\"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_white_logo.svg\" loading=\"lazy\" data-w-id=\"cacdb9d7-0d28-cab4-3bac-f8924fa81281\" alt=\"White variation of the Qyrus logo.\" class=\"image-2044 hidden\" id=\"img-2044\">\n              <div class=\"text-block-2047 text\">Buttons<\/div>\n              <div class=\"div-block-2045\">\n                <a id=\"click-button\" class=\"button-2006 w-button\">Click Me<\/a>\n                <a id=\"right-click-button\" class=\"button-2007 w-button\">Right Click Me<\/a>\n                <a id=\"dbl-click-button\" class=\"button-2008 w-button\">Dbl Click Me<\/a>\n                <a data-w-id=\"cacdb9d7-0d28-cab4-3bac-f8924fa8128b\" class=\"button-2009 w-button\" id=\"wait-btn\">Click Me \u2013 Then wait<\/a>\n              <\/div>\n              <div data-w-id=\"cacdb9d7-0d28-cab4-3bac-f8924fa8128d\" class=\"div-block-2046 hidden\" id=\"logo-btn\"><img decoding=\"async\" src=\"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_white_logo.svg\" loading=\"lazy\" alt=\"White variation of the Qyrus logo.\"><\/div>\n              <div class=\"div-block-2074\">\n                <div class=\"columns-23 w-row\">\n                  <div class=\"column-2091 w-col w-col-6\">\n                    <div class=\"div-block-2075\">\n                      <div class=\"html-embed w-embed\">\n                        <div class=\"container box\">\n                          <div class=\"container col\">\n                            <h4 class=\"text\">Favorite Color:<\/h4>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"radio\" id=\"Red\" name=\"colorType\" value=\"red\">\n                              <label class=\"text radio-item\" for=\"red\">Red<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"radio\" id=\"Yellow\" name=\"colorType\" value=\"yellow\">\n                              <label class=\"text radio-item\" for=\"yellow\">Yellow<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"radio\" id=\"Blue\" name=\"colorType\" value=\"blue\">\n                              <label class=\"text radio-item\" for=\"blue\">Blue<\/label>\n                            <\/div>\n                          <\/div>\n                          <div id=\"color-display\" class=\"none\"><\/div>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"w-col w-col-6\">\n                    <div class=\"div-block-2075\">\n                      <div class=\"html-embed w-embed\">\n                        <div class=\"container box\">\n                          <div class=\"container col\">\n                            <h4 class=\"text\">Types of Tests:<\/h4>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"checkbox\" id=\"Smoke Test\" name=\"smoke\" value=\"smoke\">\n                              <label class=\"text radio-item\" for=\"smoke\">Smoke Test<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"checkbox\" id=\"Functional Test\" name=\"functional\" value=\"functional\">\n                              <label class=\"text radio-item\" for=\"functional\">Functional Test<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"checkbox\" id=\"Integration Test\" name=\"integration\" value=\"integration\">\n                              <label class=\"text radio-item\" for=\"integration\">Integration Test<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"checkbox\" id=\"Unit Test\" name=\"unit\" value=\"unit\">\n                              <label class=\"text radio-item\" for=\"unit\">Unit Test<\/label>\n                            <\/div>\n                            <div class=\"container hor-col bs\">\n                              <input type=\"checkbox\" id=\"Acceptance Test\" name=\"acceptance\" value=\"acceptance\">\n                              <label class=\"text radio-item\" for=\"acceptance\">Acceptance Test<\/label>\n                            <\/div>\n                          <\/div>\n                          <div id=\"list-display\">\n                            <p class=\"text hidden\" id=\"smoke-list-item\">Smoke<\/p>\n                            <p class=\"text hidden\" id=\"func-list-item\">Functional<\/p>\n                            <p class=\"text hidden\" id=\"integration-list-item\">Integration<\/p>\n                            <p class=\"text hidden\" id=\"unit-list-item\">Unit<\/p>\n                            <p class=\"text hidden\" id=\"acceptance-list-item\">Acceptance<\/p>\n                          <\/div>\n                        <\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"div-block-2076\">\n                  <div class=\"html-embed-2 w-embed\">\n                    <div class=\"container col\">\n                      <label class=\"i-label text\" for=\"nickName\">Nickname<\/label>\n                      <input type=\"text\" id=\"nickName\" name=\"nname\" value=\"\" placeholder=\"Nickname\" class=\"input text\">\n                      <label class=\"i-label text\" for=\"petName\">Pet\u2019s Name<\/label>\n                      <input type=\"text\" id=\"petName\" name=\"pname\" value=\"\" placeholder=\"Pet's Name\" class=\"input text\">\n                      <label class=\"i-label text\" for=\"animal\">Select Favorite Animal<\/label>\n                      <select id=\"animal\" name=\"aname\" class=\"input text\">\n                        <option value=\"\" selected=\"\">Select Favorite Animal\u2026<\/option>\n                        <option value=\"Giraffe\">Giraffe<\/option>\n                        <option value=\"Zebra\">Zebra<\/option>\n                        <option value=\"Lion\">Lion<\/option>\n                        <option value=\"Tiger\">Tiger<\/option>\n                        <option value=\"Bear\">Bear<\/option>\n                        <option value=\"Turtle\">Turtle<\/option>\n                        <option value=\"Monkey\">Monkey<\/option>\n                        <option value=\"Llama\">Llama<\/option>\n                        <option value=\"Alpaca\">Alpaca<\/option>\n                        <option value=\"Dogbear\">Dogbear<\/option>\n                        <option value=\"Cat\">Cat<\/option>\n                        <option value=\"Snake\">Snake<\/option>\n                        <option value=\"Gorilla\">Gorilla<\/option>\n                      <\/select>\n                      <button type=\"submit\" id=\"submit-button\" class=\"btn text\">Submit<\/button>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n              <div class=\"form-below-text\">Below this text is an iFrame with a True Random Number Generator.<br><br>Swap to the iFrame in order to click the &#8220;Generate&#8221; button!<\/div>\n              <div class=\"w-embed w-iframe\"><iframe src=\"https:\/\/www.random.org\/widgets\/integers\/iframe.php?title=True+Random+Number+Generator&amp;buttontxt=Generate&amp;width=160&amp;height=235&amp;border=on&amp;bgcolor=%23FFFFFF&amp;txtcolor=%23333333&amp;altbgcolor=%23007ed9&amp;alttxtcolor=%23FFFFFF&amp;defaultmin=1&amp;defaultmax=999999999&amp;fixed=on\" frameborder=\"0\" width=\"160\" height=\"235\" style=\"min-height:235px;\" scrolling=\"no\" longdesc=\"https:\/\/www.random.org\/integers\/\">\n                  The numbers generated by this widget come from RANDOM.ORG&#8217;s true random number generator.\n              <\/iframe><\/div>\n            <\/div>\n            <div class=\"w-col w-col-1\"><\/div>\n          <\/div>\n        <\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Tutorial Test Page Buttons Click Me Right Click Me Dbl Click Me Click Me \u2013 Then wait Favorite Color: Red Yellow Blue Types of Tests: Smoke Test Functional Test Integration Test Unit Test Acceptance Test Smoke Functional Integration Unit Acceptance Nickname Pet\u2019s Name Select Favorite Animal Select Favorite Animal\u2026GiraffeZebraLionTigerBearTurtleMonkeyLlamaAlpacaDogbearCatSnakeGorilla Submit Below this text is an [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"class_list":["post-14839","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tutorial - Qyrus<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial - Qyrus\" \/>\n<meta property=\"og:description\" content=\"Tutorial Test Page Buttons Click Me Right Click Me Dbl Click Me Click Me \u2013 Then wait Favorite Color: Red Yellow Blue Types of Tests: Smoke Test Functional Test Integration Test Unit Test Acceptance Test Smoke Functional Integration Unit Acceptance Nickname Pet\u2019s Name Select Favorite Animal Select Favorite Animal\u2026GiraffeZebraLionTigerBearTurtleMonkeyLlamaAlpacaDogbearCatSnakeGorilla Submit Below this text is an [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Qyrus\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-21T10:52:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/\",\"url\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/\",\"name\":\"Tutorial - Qyrus\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.qyrus.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Qyrus_blue_logo.svg\",\"datePublished\":\"2025-11-21T05:26:26+00:00\",\"dateModified\":\"2025-11-21T10:52:16+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.qyrus.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Qyrus_blue_logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.qyrus.com\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Qyrus_blue_logo.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#website\",\"url\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/\",\"name\":\"Qyrus\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#organization\",\"name\":\"Qyrus\",\"url\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/qurus-logo.png\",\"contentUrl\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/qurus-logo.png\",\"width\":153,\"height\":34,\"caption\":\"Qyrus\"},\"image\":{\"@id\":\"https:\\\/\\\/symmetricsolutionz.co.in\\\/qyrus\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial - Qyrus","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Tutorial - Qyrus","og_description":"Tutorial Test Page Buttons Click Me Right Click Me Dbl Click Me Click Me \u2013 Then wait Favorite Color: Red Yellow Blue Types of Tests: Smoke Test Functional Test Integration Test Unit Test Acceptance Test Smoke Functional Integration Unit Acceptance Nickname Pet\u2019s Name Select Favorite Animal Select Favorite Animal\u2026GiraffeZebraLionTigerBearTurtleMonkeyLlamaAlpacaDogbearCatSnakeGorilla Submit Below this text is an [&hellip;]","og_url":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/","og_site_name":"Qyrus","article_modified_time":"2025-11-21T10:52:16+00:00","og_image":[{"url":"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/","url":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/","name":"Tutorial - Qyrus","isPartOf":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#website"},"primaryImageOfPage":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/#primaryimage"},"image":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg","datePublished":"2025-11-21T05:26:26+00:00","dateModified":"2025-11-21T10:52:16+00:00","breadcrumb":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/#primaryimage","url":"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg","contentUrl":"https:\/\/www.qyrus.com\/wp-content\/uploads\/2023\/06\/Qyrus_blue_logo.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/symmetricsolutionz.co.in\/qyrus\/"},{"@type":"ListItem","position":2,"name":"Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#website","url":"https:\/\/symmetricsolutionz.co.in\/qyrus\/","name":"Qyrus","description":"","publisher":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/symmetricsolutionz.co.in\/qyrus\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#organization","name":"Qyrus","url":"https:\/\/symmetricsolutionz.co.in\/qyrus\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#\/schema\/logo\/image\/","url":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-content\/uploads\/2025\/02\/qurus-logo.png","contentUrl":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-content\/uploads\/2025\/02\/qurus-logo.png","width":153,"height":34,"caption":"Qyrus"},"image":{"@id":"https:\/\/symmetricsolutionz.co.in\/qyrus\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/pages\/14839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/comments?post=14839"}],"version-history":[{"count":0,"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/pages\/14839\/revisions"}],"wp:attachment":[{"href":"https:\/\/symmetricsolutionz.co.in\/qyrus\/wp-json\/wp\/v2\/media?parent=14839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}