{"id":7344,"date":"2020-12-10T12:30:40","date_gmt":"2020-12-10T11:30:40","guid":{"rendered":"https:\/\/codelearn.com\/?page_id=7344"},"modified":"2021-10-19T19:08:15","modified_gmt":"2021-10-19T17:08:15","slug":"online-camps","status":"publish","type":"page","link":"https:\/\/codelearn.com\/online-camps\/","title":{"rendered":"Online camps"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; custom_padding_last_edited=&#8221;on|desktop&#8221; next_background_color=&#8221;#ffffff&#8221; admin_label=&#8221;Header&#8221; _builder_version=&#8221;4.6.4&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#89ea3a&#8221; background_color_gradient_end=&#8221;#032d00&#8243; background_color_gradient_direction=&#8221;130deg&#8221; background_enable_image=&#8221;off&#8221; parallax=&#8221;on&#8221; min_height=&#8221;385px&#8221; custom_padding=&#8221;5vw||1vw||false|false&#8221; custom_padding_tablet=&#8221;100px||100px||true&#8221; custom_padding_phone=&#8221;||||true&#8221; bottom_divider_style=&#8221;ramp2&#8243; bottom_divider_height=&#8221;250px&#8221; bottom_divider_flip=&#8221;horizontal&#8221; bottom_divider_height_tablet=&#8221;150px&#8221; bottom_divider_height_phone=&#8221;110px&#8221; bottom_divider_height_last_edited=&#8221;on|phone&#8221; saved_tabs=&#8221;all&#8221;][et_pb_row column_structure=&#8221;2_3,1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|0px||||&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.6.4&#8243; text_font=&#8221;Roboto||||||||&#8221; header_font=&#8221;Roboto|700|||||||&#8221; header_text_align=&#8221;center&#8221; header_font_size=&#8221;80px&#8221; header_line_height=&#8221;1.2em&#8221; header_3_font=&#8221;Roboto|700||on|||||&#8221; header_3_text_align=&#8221;center&#8221; header_3_text_color=&#8221;#ffffff&#8221; header_3_font_size=&#8221;24px&#8221; header_3_letter_spacing=&#8221;10px&#8221; header_3_line_height=&#8221;2em&#8221; text_orientation=&#8221;center&#8221; background_layout=&#8221;dark&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;|20px|25px|||&#8221; animation_style=&#8221;slide&#8221; animation_direction=&#8221;left&#8221; text_font_size_last_edited=&#8221;off|desktop&#8221; header_font_size_tablet=&#8221;40px&#8221; header_font_size_phone=&#8221;32px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; header_3_font_size_tablet=&#8221;16px&#8221; header_3_font_size_phone=&#8221;14px&#8221; header_3_font_size_last_edited=&#8221;on|phone&#8221; header_3_letter_spacing_tablet=&#8221;5px&#8221; header_3_letter_spacing_phone=&#8221;&#8221; header_3_letter_spacing_last_edited=&#8221;on|tablet&#8221;]<\/p>\n<h3>LEARN TO CODE AND HAVE FUN<\/h3>\n<h1>Online camps<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=&#8221;1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_image src=&#8221;https:\/\/codelearn.com\/wp-content\/uploads\/sites\/5\/2019\/06\/2gats.png&#8221; alt=&#8221;Learn to code with Marrameow&#8221; title_text=&#8221;2marrameow&#8221; _builder_version=&#8221;4.6.4&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;-48px|||-22px||&#8221; custom_padding=&#8221;|0px|0px|0px||&#8221; animation_style=&#8221;zoom&#8221;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.6.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_row _builder_version=&#8221;4.6.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.6.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_code _builder_version=&#8221;4.6.4&#8243; _module_preset=&#8221;default&#8221;]\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500&family=Montserrat:wght@700;800&display=swap');\n.top-shortcut-button {\n background:#339966; font-size: 1.8em; display:inline; margin-right:20px;\nborder-radius: 25px;\npadding: 15px 15px;\nfloat: left;\ntext-align: center;\nmargin-bottom: 15px;\n}\n.top-shortcut-button a{\ncolor:#eee\n}\n.top-shortcut-button a:hover{\ncolor:white;\nletter-spacing: 1.5px!important;\n}\n.sb_yellow .box_title {\n  font-size: 1.2em;\n}\n.sb_yellow .box_content{\n  font-size: 1.1em;\n  line-height: 1.8;\n}\n.container {\nfont-size: 16px;\n}\n#form-attendant .alignleft{\n    width: auto;\n}\n@media (max-width: 900px) {\n\t.invilabel {\n\t\tdisplay: none !important;\n\t}\n}\n\n\n\n\ndiv.code_et_pb_section.code_et_pb_section_0 {\n background-image:linear-gradient(130deg,#89ea3a 0%,#032d00 100%)!important\n}\n.code_et_pb_section_0.code_et_pb_section {\n padding-top:80px;\n padding-bottom:80px\n}\n.code_et_pb_section_0.section_has_divider.code_et_pb_bottom_divider .code_et_pb_bottom_inside_divider {\n background-image:url(data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNTBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);\n background-size:100% 250px;\n bottom:0;\n height:250px;\n z-index:1;\n transform:rotateY(180deg)\n}\n.code_et_pb_row_0.code_et_pb_row {\n padding-top:0px!important;\n margin-right:auto!important;\n margin-left:70px!important;\n padding-top:0px\n}\n.code_et_pb_text_0 {\n font-size:16px;\n padding-bottom:9px!important;\n margin-top:-7px!important;\n margin-right:20px!important;\n margin-bottom:8px!important\n}\n.code_et_pb_text_0 h1 {\n font-weight:700;\n font-size:80px;\n line-height:1.2em;\n text-align:center;\n color: #fff!important;\n}\n.code_et_pb_text_0 h3 {\n font-weight:700;\n text-transform:uppercase;\n font-size:24px;\n color:#ffffff!important;\n letter-spacing:10px;\n line-height:2em;\n text-align:center\n}\nbody.uiwebview .code_et_pb_text_0 h3 {\n font-variant-ligatures:no-common-ligatures\n}\n@media only screen and (max-width:980px) {\n .code_et_pb_section_0.code_et_pb_section {\n  padding-top:100px;\n  padding-bottom:100px\n }\n .code_et_pb_section_0.section_has_divider.code_et_pb_bottom_divider .code_et_pb_bottom_inside_divider {\n  background-image:url(data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNTBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);\n  background-size:100% 150px;\n  bottom:0;\n  height:150px;\n  z-index:1;\n  transform:rotateY(180deg) rotateX(0)\n }\n .code_et_pb_text_0 h1 {\n  font-size:40px\n }\n .code_et_pb_text_0 h3 {\n  font-size:16px;\n  letter-spacing:5px\n }\n}\n@media only screen and (max-width:767px) {\n .code_et_pb_section_0.section_has_divider.code_et_pb_bottom_divider .code_et_pb_bottom_inside_divider {\n  background-image:url(data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMTBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmZmZmYiPjxwYXRoIGQ9Ik0wIDE0MGgxMjgwQzU3My4wOCAxNDAgMCAwIDAgMHoiIGZpbGwtb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgMzAgMCAzMHoiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMCAxNDBoMTI4MEM1NzMuMDggMTQwIDAgNjAgMCA2MHoiLz48L2c+PC9zdmc+);\n  background-size:100% 110px;\n  bottom:0;\n  height:110px;\n  z-index:1;\n  transform:rotateY(180deg) rotateX(0)\n }\n .code_et_pb_text_0 h1 {\n  font-size:32px\n }\n .code_et_pb_text_0 h3 {\n  font-size:14px\n }\n}\n\/* MOBILE VERSION *\/\n@media only screen and (max-width:500px) {\n    .code_et_pb_text_0 h1 {\n        font-size: 30px !important;\n    }\n    .code_et_pb_section_0.code_et_pb_section {\n        padding-top: 30px;\n        padding-bottom: 10px;\n    }\n    code_et_pb_row_0.code_et_pb_row {\n        margin-left: 40px !important;\n    }\n    body:not(.et-tb-has-header) #main-content .container {\n        padding-top: 0px;\n    }\n    #et_top_search{\n        display: none;\n    }\n}\n.code_et_pb_bottom_inside_divider {\n    margin-bottom: -1px;\n}\n.code_et_pb_bottom_inside_divider, .code_et_pb_top_inside_divider {\n    display: block;\n    background-repeat-y: no-repeat;\n    position: absolute;\n    pointer-events: none;\n    width: 100%;\n}\n.entry-title{display: none;}\n\/*** Take out the divider line between content and sidebar ***\/\n#main-content .container:before {background: none;}\n\n\/*** Hide Sidebar ***\/\n#sidebar {display:none;}\n\n\/*** Expand the content area to fullwidth ***\/\n@media (min-width: 981px){\n#left-area {\n    width: 100%;\n    padding: 23px 0px 0px !important;\n    float: none !important;\n}\nbody:not(.et-tb-has-header) #main-content .container {\n    padding-top: 0px;\n}\n}\n\n.top-shortcut-button {\n background:#6cc02d !important;\n}\n.contact-form input[type=\"submit\"] {\n\tcolor: #fff;\n    border-width: 0px!important;\n    border-color: rgba(0,0,0,0);\n    border-radius: 4px;\n    letter-spacing: 5px;\n    font-size: 14px;\n    font-family: 'Roboto',Helvetica,Arial,Lucida,sans-serif!important;\n    font-weight: 700!important;\n    text-transform: uppercase!important;\n    background-image: linear-gradient(90deg,#89ea3a 0%,#89ea3a 100%);}\n\n.contact-form input[type=\"submit\"]:hover\t{\n\tletter-spacing: 5.5px!important;\n\tpadding: .3em .7em .3em .7em;}\n\n.link-reset {\n    color: #e8750f;\n    font-size: 12px;\n    text-shadow: 0 1px 1px #fff;\n    font-weight: 500;\n    text-transform: uppercase;\n    position: absolute;\n    top: 17px;\n\tright: 5px;}\n\n.link-reset:hover {\n    color: #ff8a00;}\n\n.sb a.small-button {\n\tfont-size: 16px;}\n\n.contact-form a {\n\tcolor: #e8750f;}\n\n.contact-form .success_submited_form h2{\n\tmargin: 25px 0 20px;}\n\/*-----------------------------------*\/\n\/* Styled Tables and Boxes *\/\n\/*-----------------------------------*\/\n.sb {\n    -moz-border-radius: 12px;\n    -webkit-border-radius: 12px;\n    border-radius: 12px;\n    border-collapse: collapse;\n    margin:10px 0 20px;\n    text-shadow:none;\n    color:#404040}\n\n.sb {\n    border: 1px solid #e8890f}\n\n.sb_shadow  {\n    box-shadow: 0 0 3px #000;\n    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);\n    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2)}\n\n.sb .box_title\t{\n    background:#e8890f;\n    color:#fff;\n    font-size:16px;\n    font-weight:normal}\n\n\/* yellow overwritten with green during transition (later we can just use a different class) *\/\n.sb_yellow {\n    border:1px solid #5fd300}\n\/*    border:1px solid #ffd012}*\/\n.sb_yellow .box_title {\n    background:#5fd300;\n    color:#fff}\n\/*    background:#ffd012;\n    color:#363636}*\/\n\t.legacy_styled_table a{\n\tcolor: #e8750f;\n\t}\n\n\t.legacy_styled_table.table_green th{\n\tbackground: #6cc02d;\n}\n.table_green table,\n.sb_green {\n    border:1px solid #009551}\n.table_green table tr th,\n.sb_green .box_title {\n    background:#009551;\n    color:#fff}\n\n.sb_dark  {\n    border:1px solid #363636}\n.sb_dark .box_title {\n    background:#363636;\n    color:#fff}\n\n.sb_orange {\n    border:1px solid #e8890f}\n.sb_orange .box_title {\n    background:#e8890f;\n    color:#fff}\n\n.sb_purple {\n    border:1px solid #a864a8}\n.sb_purple .box_title {\n    background:#a864a8;\n    color:#fff}\n\n.sb_red {\n    border:1px solid #bd4343}\n.sb_red .box_title {\n    background:#bd4343;\n    color:#fff}\n\n\/* Styled Boxes *\/\n.sb .box_title {\n    padding:10px 15px}\n\n.sb.notitle .box_title {\n    display:none}\n\n.sb .box_content {\n    padding:15px;\n    background:#ffffff;\n    color:#595959;\n    margin:1px;\n    -webkit-border-bottom-right-radius: 12px;\n    -webkit-border-bottom-left-radius: 12px;\n    -moz-border-radius-bottomright: 12px;\n    -moz-border-radius-bottomleft: 12px;\n    border-bottom-right-radius: 12px;\n    border-bottom-left-radius: 12px}\n\n.sb.sb_yellow.course_wrapper {\n    border-radius: 16px;\n    overflow: hidden;\n    border-color: #eee;\n    box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n}\n\n.sb .box_content table {\n\tborder: 0;\n\tborder-collapse: collapse;\n\tborder-spacing: 0;}\n\n.sb .box_content table td {\n\tborder: 0;\n\tmargin: 0;\n\tpadding: 0;}\n\n.sb .frame_center {\n\tborder: none;\n\tdisplay: block;\n\tmargin: 0 auto 20px auto;\n\ttext-align: center;}\n\/* Forms\n===================================*\/\n.comment-form fieldset{\n    padding:20px;\n    border:1px solid #c9c9c9}\n\n.comment-form ul, #left-area .entry-content .comment-form ul {\n\tpadding: 0;\n\tmargin: 10px 0 10px 20px;\n\tlist-style: none outside;}\n\n.comment-form ul, #left-area .entry-content .comment-form ul li.course_wrapper{\n    list-style: disc;\n}\n.comment-form ul, #left-area .entry-content .comment-form ul li.course_wrapper{\n    color: black;\n}\n.comment-form ul ::marker, #left-area .entry-content .comment-form ul li.course_wrapper ::marker{\n    color: #3cb043;\n}\n.form-course-online-tag{\n    cursor: help;\n    padding: 5px 5px;\n    background-color: #3cb043;\n    display: inline-block;\n    border-radius: 20px;\n    color: white;\n    font-weight: bold;\n    font-size: 0.8em;\n    line-height: 0.8em;\n}\n.comment-form form {\n    font-family: 'Cabin', sans-serif;\n    font-size:14px;\n    color:#111}\n\n.comment-form form .row {\n\twidth: 49%;\n\tmin-width: 250px;\n    padding:5px 0}\n\n.comment-form form .row.small_row {\n\twidth: 7%;\n\tmin-width: 7%;\n    padding:5px 0}\n\n.comment-form form .row.summary_wrapper {\n\twidth: 97%;}\n\n.comment-form form .row.summary_wrapper select {\n\twidth: 10%;}\n\n.comment-form input[type=\"text\"],\n.comment-form input[type=\"password\"],\n.comment-form input[type=\"email\"],\n.comment-form input[type=\"reset\"],\n.comment-form select,\n.comment-form textarea {\n\twidth: 90%;\n    resize:none;\n    font-family: Open Sans, Arial, sans-serif;\n    background:#fff;\n    border:1px solid #e6e6e6;\n    padding:8px 10px;\n    color:#666;\n    -webkit-border-radius: 8px;\n    border-radius: 8px}\n\n.comment-form input[type=\"text\"]:focus,\n.comment-form input[type=\"password\"]:focus,\n.comment-form input[type=\"email\"]:focus,\n.comment-form select:focus,\n.comment-form textarea:focus {\n    border-color: #87bf2e;\n}\n\n.comment-form textarea{\n    overflow: auto;\n    resize: vertical}\n\n.comment-form input, .comment-form textarea, .comment-form input[type=\"submit\"]:focus, .comment-form div{\n    outline:0 none}\n\n.comment-form input[type=\"radio\"],input[type=\"checkbox\"]{\n    margin-right:10px; margin-left:10px}\n\n.comment-form button::-moz-focus-inner {\n    border: 0;\n    padding: 0}\n\n.comment-form input[type=\"button\"]:hover, .comment-form input[type=\"button\"]:focus,.comment-form input[type=\"reset\"]:hover,\n.comment-form input[type=\"reset\"]:focus,.comment-form input[type=\"submit\"]:hover,.comment-form input[type=\"submit\"]:focus,\n.comment-form button:hover,.comment-form button:focus{\n    cursor:pointer}\n\n.comment-form button[disabled], .comment-form input[disabled] {cursor: default}\n\n.gift_card{\n    margin-bottom:5px;\n}\n.gift_card_inputs{\n    margin-top:10px;\n}\n.gift_card_inputs input,.gift-card-key,.gift-card-pin{\n    margin-right:20px;\n    margin-left:10px;\n}\n.gift-card-key,.gift-card-pin{\n    color:grey;\n}\n.gift-card-balance, .gift-card-amount {\n    display:inline-block;\n     width:120px;\n    text-align:right;\n}\n#gift-card-errors{\n    color:red;\n    font-size:11px;\n    margin-left:10px;\n}\n\n\/*-----------------------------------*\/\n\/* Comment form \/ Contact form *\/\n\/*-----------------------------------*\/\n.add-comment ,.comment-respond {\n    margin:20px 0 40px 0;\n    position:relative;\n    background:#f2f2f2;\n    border:1px solid #e6e6e6}\n\n.contact-form {\n\tmargin:40px 0}\n\n.add-comment h3,.comment-respond  h3,\n.contact-form h3 {\n    height:55px;\n    line-height:55px;\n    color:#e8750f;\n    font-size:21px;\n    text-shadow:0 1px 1px #fff;\n    padding:0 20px;\n    margin:0 !important}\n\n.sb .box_content, .comment-form, #course-search, #course-order {\n    font-family: 'Inter', Helvetica, Arial, sans-serif;\n    color: #2c3e50;\n}\n\n.sb h1, .sb h2, .sb h3, .sb h4,\n.contact-form h1, .contact-form h2, .contact-form h3, .contact-form h4 {\n    font-family: 'Montserrat', Helvetica, Arial, sans-serif;\n    font-weight: 800;\n    letter-spacing: -0.5px;\n}\n\n.comment-form {\n    border-top:1px solid #d9d9d9}\n\n.comment-form * {\n\tbox-sizing: unset;}\n\n.comment-form form {\n    padding:15px 20px}\n\n.comment-form .row {\n    padding:5px 0;\n    position:relative;\n    margin-right:20px}\n\n.field_select {\n    z-index:2}\n\n.field_text {\n    z-index:1}\n\n.comment-form .row.omega {\n    margin-right:0}\n\n.comment-form #payment_type_selector {\n    clear: both;\n    float: left;\n}\n\n.comment-form .row .label_title {\n    line-height:18px;\n    display:block;\n    color:#000;\n    font-size:14px;\n    margin-bottom:3px;\n    font-weight:bold}\n\n.comment-form .inputtext,\n.comment-form .textarea,\n.comment-form .select_styled {\n    color:#666;\n    font-size:14px;\n    line-height:18px;\n    margin:3px 0}\n\n.comment-form .rowRadio,\n.comment-form .rowCheckbox {\n    width:280px}\n\n.comment-form .input_styled .label_title {\n    margin-bottom:10px}\n\n.comment-form .select_styled{\n    height:34px;}\n\n.comment-form .select_styled option {\n    font-size:13px;\n    padding:9px 0;\n    text-indent:5px}\n\n.comment-form .textarea {\n    width:90%;\n    height:100px;\n    overflow:auto}\n\n.comment-form .row.field_textarea {\n\twidth: 100%;}\n\n.comment-form .rowSubmit {\n    padding:0;\n    position:relative;\n    text-align:left;\n    margin-right:0}\n\n.btn-submit, .btn-arrow,\ninput.btn-submit, input.btn-arrow,\n.comment-form .btn-submit{\n    font-size: 12px;\n    line-height:1em;\n    font-weight:bold;\n    text-transform:uppercase;\n    color: #753c00;\n    padding: 2px 10px 2px 10px;\n    width:140px;\n    height:34px;\n    text-align:center;}\n\n.row.select.omega .cuteselect {\n\tposition: relative;}\n\n.row.select.omega .cuteselect::after {\n    content: \"\";\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    -webkit-transform: translateY(-50%);\n    transform: translateY(-50%);\n    width: 0;\n    height: 0;\n    border: 6px solid transparent;\n        border-top-color: transparent;\n    border-top-color: #666;\n    margin-top: 3px;\n    pointer-events: none;}\n\n.row.select.omega select {\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n    -moz-appearance: none;\n    -webkit-appearance: none;\n    appearance: none;\n}\n<\/style>\n<a name=\"campus\" hidefocus=\"true\" style=\"outline: none;\"><\/a>    <p><strong>Ages and prerequisites:<\/strong> If a camp does not specify ages or prerequisite skills, the usual age range is <strong>7 to 18<\/strong> and no prior knowledge of robotics or programming is required.<\/p>\n<p>Camps marked as <strong>Online<\/strong> are held by videoconference from home. Check the technical requirements in each camp description.<\/p>\n<p>Cancellations: Codelearn may cancel a camp due to low enrollment or force majeure. In these cases, we will notify you as early as possible and refund 100% of the amount paid.<\/p>\n\n    <style>\n      #form-attendant #course_list {\n        margin: 14px 0 0 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      #form-attendant #course_list > li.course_wrapper {\n        list-style: none !important;\n        margin-bottom: 22px;\n        padding: 12px 14px;\n        border: 1px solid #e4e4e4;\n        border-radius: 10px;\n        background: #fafafa;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n      }\n\n      #form-attendant #course_list > li.course_wrapper::marker {\n        content: \"\";\n      }\n\n      #form-attendant #course_list .course_name {\n        line-height: 1.3;\n      }\n\n      #form-attendant #course_list .course_occurrence_wrapper {\n        margin-top: 8px;\n        line-height: 1.45;\n        padding-left: 2px;\n      }\n\n      #form-attendant #course_list .course_occurrence_wrapper .course {\n        vertical-align: middle;\n        margin-top: -1px;\n      }\n\n      #form-attendant #course_list .course_occurrence_wrapper label {\n        margin-left: 8px;\n        display: inline;\n        vertical-align: middle;\n      }\n\n      #form-attendant #course_list .course_occurrence_wrapper > span {\n        margin-left: 8px;\n      }\n\n      #form-attendant #course_list .course_occurrence_wrapper > a.course-info-link,\n      #form-attendant #course_list > li.course_wrapper > a[href^=\"#campus_\"] {\n        display: inline-block;\n        margin-left: 8px;\n        white-space: nowrap;\n      }\n\n      #form-attendant .summary_wrapper {\n        margin-top: 14px !important;\n        margin-right: 0;\n      }\n\n      #form-attendant .summary_wrapper ul {\n        margin: 0;\n      }\n\n      #form-attendant .summary_wrapper > a {\n        display: inline-block;\n        margin-top: 0;\n      }\n\n      #form-attendant.has-selected-courses .summary_wrapper ul {\n        margin: 6px 0;\n      }\n\n      #form-attendant.has-selected-courses .summary_wrapper > a {\n        margin-top: 4px;\n      }\n\n      #form-attendant .form-footer-notes,\n      #form-attendant .form-footer-photos,\n      #form-attendant #payment_type_selector {\n        width: 100%;\n        margin-right: 0;\n        float: none;\n      }\n\n      #form-attendant .form-footer-notes textarea {\n        width: min(760px, 100%);\n        min-height: 120px;\n      }\n\n      #form-attendant .form-footer-photos #allows_photos,\n      #form-attendant #payment_type_selector #payment_type {\n        width: min(460px, 100%) !important;\n      }\n\n      #form-attendant #form-footer-consents {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 18px 28px;\n        margin: 10px 0 8px;\n      }\n\n      #form-attendant #form-footer-consents .row.checkbox {\n        margin: 0;\n        padding: 0;\n        float: none;\n      }\n\n      #form-attendant #form-footer-consents label {\n        margin-left: 10px;\n      }\n\n      @media (max-width: 768px) {\n        #form-attendant #course_list {\n          margin-top: 10px;\n        }\n\n        #form-attendant #course_list > li.course_wrapper {\n          margin-bottom: 14px;\n          padding: 10px;\n        }\n\n        #form-attendant #form-footer-consents {\n          display: block;\n          margin-top: 8px;\n        }\n\n        #form-attendant #form-footer-consents .row.checkbox {\n          margin-bottom: 8px;\n        }\n\n        #form-attendant .form-footer-notes {\n          padding-right: 8px;\n        }\n\n        #form-attendant .form-footer-notes textarea {\n          width: 100%;\n          box-sizing: border-box;\n          min-height: 88px;\n        }\n\n        #form-attendant .summary_wrapper > a {\n          margin-top: 16px;\n          margin-bottom: 6px;\n        }\n\n        #form-attendant #summary_attendancies li.course {\n          line-height: 1.4;\n          padding: 2px 0 6px;\n        }\n\n        #form-attendant #summary_attendancies li.course > span {\n          float: none !important;\n          display: block;\n          text-align: right !important;\n          margin-top: 6px;\n          font-weight: 700;\n          color: #25384f;\n        }\n\n        #form-attendant #summary_complements li.complement,\n        #form-attendant #summary_custom_complements li.complement {\n          line-height: 1.4;\n          padding: 4px 0 6px;\n        }\n\n        #form-attendant #summary_complements li.complement > span,\n        #form-attendant #summary_custom_complements li.complement > span {\n          float: none !important;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          gap: 10px;\n          margin-top: 6px;\n        }\n\n        #form-attendant #summary_complements li.complement > span > span,\n        #form-attendant #summary_custom_complements li.complement > span > span {\n          margin-left: 0 !important;\n        }\n\n        #form-attendant #summary_complements li.complement select,\n        #form-attendant #summary_custom_complements li.complement select {\n          min-width: 92px !important;\n        }\n      }\n    <\/style>\n    <a name=\"formulari\" id=\"formulari-inscripcio\"><\/a>\n    <div class=\"add-comment contact-form\" id=\"form-attendant\">\n      <h3 id=\"header_message\" class=\"add-comment-title\" style=\"display: inline-block\">Enrollment to online camps<\/h3>\n      <span class=\"link-reset\" style='font-size: 1.2em; position: relative; margin-bottom: 20px; float: right;'>TOTAL: <span class='old_price' style='text-decoration: line-through; margin-right: 10px;'><\/span> <span class='new_price' style='font-weight: bold; font-size: 1.5em'>0 \u20ac<\/span><\/span>\n      <div class=\"comment-form\" style=\"clear: both;\"><form action=\"\" method=\"post\" id=\"attendant_form\">\n\n          <input type=\"hidden\" id=\"attendants\" name=\"attendants\"\/>\n          <input type=\"hidden\" id=\"complements\" name=\"complements\"\/>\n          <input type=\"hidden\" id=\"gift_cards\" name=\"gift_cards\">\n          <input type=\"hidden\" id=\"coupon\" name=\"coupon\">\n          <input type=\"hidden\" id=\"final_price\" name=\"final_price\"\/>\n          <input type=\"hidden\" id=\"final_price\" name=\"origin_scope_id\" value=\"28\"\/>\n          <input type=\"hidden\" id=\"recaptcha_token_attendant\" name=\"recaptcha_token\" value=\"\" \/>\n          <input type=\"hidden\" id=\"recaptcha_error\" name=\"recaptcha_error\" value=\"\" \/>\n          <input type=\"hidden\" id=\"recaptcha_error_context\" name=\"recaptcha_error_context\" value=\"\" \/>\n          <div class='row alignleft select omega' style='' id=\"siblings_selector\">\n            <label class='label_title' for='sib_qty'>How many siblings would you like to enroll in the course?<\/label>\n            <span class=\"cuteselect\"><select  style='width:60px;' class='select_styled tfuse_option' name='sib_qty' id='students_amount'><option value='1'>1<\/option>\n              <option value='2'>2<\/option>\n              <option value='3'>3<\/option>\n              <option value='4'>4<\/option>\n            <\/select><\/span>\n          <\/div>\n          <div class=\"clear\"><\/div><div class='row field_text alignleft' style=''>\n            <label class='label_title' for='conexus_nom' id='single_student_label'>Student's full name<\/label><label class='label_title' for='conexus_nom' id='multiple_student_label' style=\"display:none\">Sibling's name 1<\/label>\n            <input type='text' class='inputtext input_middle student_name' name='students[1][name]' data-index='1' data-default-name='Sibling 1'\/>\n          <\/div>\n          <div class='row small_row field_text alignleft  omega ' style=''>\n            <label class='label_title' for='students[1][age]'>Age<\/label>\n            <input type='text' style='width:25px;' class='inputtext input_middle' name='students[1][age]'\/>\n            <input type='text' name='username' autocomplete='off' style='display:none'\/>\n          <\/div>\n\n          <div class=\"field_text alignleft\">\n            <label class=\"invilabel\" style=\"line-height: 35px; display:block;\" for=''>&nbsp;<\/label>\n            <input class='is_student' style='width:15px;' type='checkbox' name='students[1][is_student]' id='is_student_1'\/>\n            <label class='label_title' for='is_student_1'>Codelearn student?<\/label>\n            <div class='is_pioneer_area' style=\"display:none\">\n              <input class='is_pioneer' style='width:15px;' type='checkbox' name='students[1][is_pioneer]' id='is_pioneer_1' \/>\n              <label class='label_title' for='is_pioneer_1'>Pioneer?<\/label>\n            <\/div>\n          <\/div>\n\n          <div style='display:none; margin-top: 10px' id='student_2'>\n            <div class=\"clear\"><\/div><div class='row field_text alignleft' style=''>\n              <label class='label_title' for='conexus_nom'>Sibling's name 2<\/label>\n              <input type='text' class='inputtext input_middle student_name' name='students[2][name]' data-index='2' data-default-name='Sibling 2'\/>\n            <\/div>\n            <div class='row small_row field_text alignleft  omega ' style=''>\n              <label class='label_title' for='students[age][2]'>Age<\/label>\n              <input type='text' style='width:25px;' class='inputtext input_middle' name='students[2][age]'\/>\n            <\/div>\n\n          <div class=\"field_text alignleft\">\n            <label class=\"invilabel\" style=\"line-height: 35px; display:block;\" for=''>&nbsp;<\/label>\n              <input class='is_student' style='width:15px;' type='checkbox' name='students[2][is_student]' id='is_student_2'  \/>\n              <label class='label_title' for='is_student_2'>Codelearn student?<\/label>\n              <div class='is_pioneer_area' style=\"display:none\">\n                <input class='is_pioneer' style='width:15px;' type='checkbox' name='students[2][is_pioneer]' id='is_pioneer_2' \/>\n                <label class='label_title' for='is_pioneer_2'>Pioneer?<\/label>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div style='display:none; margin-top: 10px' id='student_3'>\n            <div class=\"clear\"><\/div><div class='row field_text alignleft' style=''>\n              <label class='label_title' for='conexus_nom'>Sibling's name 3<\/label>\n              <input type='text' class='inputtext input_middle student_name' name='students[3][name]' data-index='3' data-default-name='Sibling 3'\/>\n            <\/div>\n            <div class='row small_row field_text alignleft  omega ' style=''>\n              <label class='label_title' for='students[age][3]'>Age<\/label>\n              <input type='text' style='width:25px;' class='inputtext input_middle' name='students[3][age]'\/>\n            <\/div>\n\n          <div class=\"field_text alignleft\">\n            <label class=\"invilabel\" style=\"line-height: 35px; display:block;\" for=''>&nbsp;<\/label>\n              <input class='is_student' style='width:15px;' type='checkbox' name='students[3][is_student]' id='is_student_3'\/>\n              <label class='label_title' for='is_student_3'>Codelearn student?<\/label>\n              <div class='is_pioneer_area' style=\"display:none\">\n                <input class='is_pioneer' style='width:15px;' type='checkbox' name='students[3][is_pioneer]' id='is_pioneer_3'\/>\n                <label class='label_title' for='is_pioneer_3'>Pioneer?<\/label>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div style='display:none; margin-top: 10px' id='student_4'>\n            <div class=\"clear\"><\/div><div class='row field_text alignleft' style=''>\n              <label class='label_title' for='conexus_nom'>Sibling's name 4<\/label>\n              <input type='text' class='inputtext input_middle student_name' name='students[4][name]' data-index='4' data-default-name='Sibling 4'\/>\n            <\/div>\n            <div class='row small_row field_text alignleft  omega ' style=''>\n              <label class='label_title' for='students[age][4]'>Age<\/label>\n              <input type='text' style='width:25px;' class='inputtext input_middle' name='students[4][age]'\/>\n            <\/div>\n\n          <div class=\"field_text alignleft\">\n            <label class=\"invilabel\" style=\"line-height: 35px; display:block;\" for=''>&nbsp;<\/label>\n              <input class='is_student' style='width:15px;' type='checkbox' name='students[4][is_student]' id='is_student_4' \/>\n              <label class='label_title' for='is_student_4'>Codelearn student?<\/label>\n              <div class='is_pioneer_area' style=\"display:none\">\n                <input class='is_pioneer' style='width:15px;' type='checkbox' name='students[4][is_pioneer]' id='is_pioneer_4' \/>\n                <label class='label_title' for='is_pioneer_4'>Pioneer?<\/label>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"clear\" style=\"margin-top: 20px;\"><\/div>\n          <div class='row field_text alignleft  '>\n            <label class='label_title' for='conexus_email'>Contact email address<\/label>\n            <input type='text' class='inputtext input_middle conexus_email' name='email'\/>\n          <\/div>\n          <div class='row field_text alignleft  omega' style=''>\n            <label class='label_title' for='conexus_poblaci'>Phone number<\/label>\n            <input type='text' class='inputtext input_middle' name='phone'\/>\n          <\/div>\n          <div class=\"clear\"><\/div><div class='row' style='margin-top: 20px'>\n            <div class='label_title' >What courses would you like to do? <span id='at_least_one' style=\"display:none; color: red;\">You must select at least one course<\/span><\/div>\n          <\/div>\n          \n\n<div id=\"course-search\">\n\n    <div id=\"filter-title\">\n        Show courses:\n    <\/div>\n\n    <div class=\"filters\">\n\n        <!-- Format Filter Dropdown -->\n        <div class=\"filter-group\" data-filter=\"format\">\n            <button class=\"dropdown-toggle\" onclick=\"toggleDropdown('formatDropdown')\" type=\"button\" title=\"In person \/ Online\">\n                <span class=\"filter-button-title\">In person \/ Online<\/span>\n                <span class=\"filter-button-selected\"> <\/span>\n            <\/button>\n            <div class=\"dropdown-content\" id=\"formatDropdown\">\n                <div class=\"filter-section\">\n                    <div class=\"checkbox-group\">\n                        <label><input type=\"checkbox\" class=\"format\" name=\"format\" value=\"online\"> Online <\/label>\n                        <label><input type=\"checkbox\" class=\"format\" name=\"format\" value=\"inperson\"> In person<\/label>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Age Filter Dropdown -->\n        <div class=\"filter-group\" data-filter=\"age\">\n            <button class=\"dropdown-toggle\" onclick=\"toggleDropdown('ageDropdown')\" type=\"button\" title=\"Age\">\n                <span class=\"filter-button-title\">Age<\/span>\n                <span class=\"filter-button-selected\"> <\/span>\n            <\/button>\n            <div class=\"dropdown-content\" id=\"ageDropdown\">\n                <div class=\"filter-section\">\n                    <label for=\"age\">Enter the age:<\/label>\n                    <input type=\"number\" id=\"age\" placeholder=\"Age\">\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Areas Filter Dropdown -->\n        <div class=\"filter-group\" data-filter=\"area\">\n            <button class=\"dropdown-toggle\" onclick=\"toggleDropdown('areasDropdown')\" type=\"button\" title=\"Areas\">\n                <span class=\"filter-button-title\">Areas<\/span>\n                <span class=\"filter-button-selected\"> <\/span>\n            <\/button>\n            <div class=\"dropdown-content\" id=\"areasDropdown\">\n                <div class=\"filter-header\">\n                    <a id=\"clear-area-filters\" href=\"javascript:void(0);\">Remove filters<\/a>\n                <\/div>\n                <div class=\"filter-section\">\n                    <div class=\"checkbox-group\">\n                        <label><input type=\"checkbox\" class=\"area\" value=\"robotics\"> Robotics<\/label>\n                        <label><input type=\"checkbox\" class=\"area\" value=\"minecraft\"> Minecraft<\/label>\n                        <label><input type=\"checkbox\" class=\"area\" value=\"videogames\"> Videogames<\/label>\n                        <label><input type=\"checkbox\" class=\"area\" value=\"other\"> Others<\/label>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Week Calendar Filter Dropdown -->\n        <div class=\"filter-group\" data-filter=\"weeks\">\n            <button class=\"dropdown-toggle\" onclick=\"toggleDropdown('weeksDropdown')\" type=\"button\" title=\"Date\">\n                <span class=\"filter-button-title\">Date<\/span>\n                <span class=\"filter-button-selected\"> <\/span>\n            <\/button>\n            <div class=\"dropdown-content\" id=\"weeksDropdown\">\n                <div class=\"filter-header\">\n                    <a id=\"clear-weeks-filters\" style=\"display:none;\" href=\"javascript:void(0);\">Remove filters<\/a>\n                <\/div>\n                <div class=\"filter-section\">\n                    <div id=\"jquery-ui-wrapper\" class=\"week-picker\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <a href=\"javascript:void(0);\" id=\"clear-all-filters\" class=\"clear-filters-link\" title=\"Remove all filters\">Remove all filters<\/a>\n\n\n<\/div>\n<div id=\"course-order\">\n    <div id=\"order-title\">\n        Sort by:\n    <\/div>\n    <div class=\"order-buttons\">\n        <!-- Order by course (default) -->\n        <button class=\"order-button selected\" value=\"course\" id=\"order-course\" type=\"button\">\n            Course        <\/button>\n        <!-- Order by week (default) -->\n        <button class=\"order-button\" value=\"date\" id=\"order-week\" type=\"button\">\n            Dates        <\/button>\n    <\/div>\n<\/div>\n\n<style>\n\n    #course-search, #course-order{\n        padding: 15px 0 5px 0;\n        width: fit-content;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n    }\n\n    #filter-title, #order-title {\n        color: #e8750f;\n        font-weight: bold;\n        margin-right: 10px;\n    }\n\n    .filters, .order-buttons {\n        display: flex;\n        gap: 10px;\n        margin-right: 10px;\n        flex-wrap: wrap;\n    }\n\n    .filter-group {\n        position: relative;\n        display: inline-block;\n    }\n\n    .dropdown-toggle, .order-button  {\n        background-color: #3CB043; \/* Green background *\/\n        color: #fff; \/* White text *\/\n        padding: 9px 14px;\n        font-size: 15px;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n\n    .order-button.selected{\n        border: #1F3004 3px solid;\n        font-weight: bold;\n    }\n\n    .order-button:not(.selected){\n        background-color: #3CB043;\n        padding: 4px 6px;\n    }\n\n    .dropdown-content {\n        display: none;\n        position: absolute;\n        background-color: #f0fff0; \/* Light green background *\/\n        min-width: 250px;\n        border: 1px solid #3CB043;\n        border-radius: 5px;\n        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);\n        z-index: 1000;\n        padding: 15px;\n    }\n\n    .filter-header {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 10px;\n    }\n\n\n    .filter-section label {\n        font-weight: bold;\n        display: block;\n        margin-bottom: 5px;\n    }\n\n    .filter-section select, .filter-section input[type=\"number\"] {\n        width: 100%;\n        padding: 5px;\n        font-size: 14px;\n        border: 1px solid #3CB043;\n        border-radius: 3px;\n        box-sizing: border-box;\n    }\n\n    .checkbox-group label {\n        display: block;\n        font-size: 14px;\n        cursor: pointer;\n    }\n\n    .checkbox-group input[type=\"checkbox\"] {\n        margin-right: 8px;\n        vertical-align: middle;\n    }\n\n    .clear-filters-link, #clear-area-filters {\n        color: #e8750f; \/* Green color *\/\n        text-decoration: underline;\n        cursor: pointer;\n        font-weight: bold;\n        margin-right: 15px;\n        flex-grow: 1;\n    }\n\n    .clear-filters-link:hover {\n        color: #2E8B57; \/* Darker green on hover *\/\n    }\n\n    #areasDropdown {\n        min-width: 170px;\n    }\n\n    .calendar-container {\n        display: none; \/* Initially hidden *\/\n        position: absolute;\n        z-index: 1000;\n        background: white;\n        border: 1px solid #ccc;\n        padding: 10px;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n    }\n\n    @media (max-width: 767px) {\n        #course-search {\n            width: 100%;\n            align-items: center;\n            flex-wrap: wrap;\n        }\n        #filter-title {\n            width: 100%;\n            margin-right: 0;\n            margin-bottom: 8px;\n        }\n        .filters {\n            width: auto;\n            flex: 1 1 auto;\n            min-width: 0;\n            display: flex;\n            flex-wrap: nowrap;\n            overflow-x: auto;\n            -webkit-overflow-scrolling: touch;\n            scrollbar-width: none;\n            gap: 10px;\n            padding-bottom: 4px;\n        }\n        .filters::-webkit-scrollbar {\n            display: none;\n        }\n        .filters .filter-group {\n            flex: 0 0 auto;\n        }\n        .filters .filter-group .dropdown-content {\n            position: fixed;\n            left: 12px;\n            right: 12px;\n            top: 86px;\n            max-height: calc(100vh - 110px);\n            overflow: auto;\n            z-index: 9999;\n        }\n        .filters .dropdown-toggle {\n            width: 44px;\n            height: 44px;\n            min-width: 44px;\n            padding: 0;\n            border-radius: 999px;\n            border: 1px solid #ddd;\n            background: #fff;\n            color: #2c3e50;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            position: relative;\n            font-size: 0;\n            line-height: 1;\n        }\n        .filters .dropdown-toggle .filter-button-title,\n        .filters .dropdown-toggle .filter-button-selected {\n            display: none;\n        }\n        .filters .filter-group[data-filter=\"format\"] .dropdown-toggle::before { content: \"\ud83d\udcbb\"; font-size: 18px; }\n        .filters .filter-group[data-filter=\"age\"] .dropdown-toggle::before { content: \"\ud83d\udc64\"; font-size: 18px; }\n        .filters .filter-group[data-filter=\"area\"] .dropdown-toggle::before { content: \"\ud83e\udde9\"; font-size: 18px; }\n        .filters .filter-group[data-filter=\"weeks\"] .dropdown-toggle::before { content: \"\ud83d\udcc5\"; font-size: 18px; }\n        .filters .filter-group.has-selection .dropdown-toggle {\n            background: #9dc12c;\n            border-color: #87bf2e;\n            box-shadow: 0 0 0 2px rgba(135, 191, 46, 0.2);\n        }\n        .filters .filter-group.is-open {\n            z-index: 10000;\n        }\n        #clear-all-filters {\n            margin: 0 0 0 8px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 34px;\n            height: 34px;\n            padding: 0;\n            border: 0;\n            background: transparent;\n            text-decoration: none;\n            font-size: 0;\n            flex-grow: 0;\n        }\n        #clear-all-filters::before {\n            content: \"\ud83d\uddd1\ufe0f\";\n            font-size: 20px;\n        }\n    }\n<\/style>\n\n<script type='text\/javascript'>\n    const courseFiltersLang = \"en\";\n\n    const areaMatches = {\n        \"robotics\": [\"lego\", \"arduino\"],\n        \"minecraft\": [\"minecraft\"],\n        \"videogames\": [\"scratch\", \"roblox\", \"fortnite\", \"unity\", \"unreal\", \"godot\"]\n    }\n\n    function toggleDropdown(id) {\n        \/\/ Hide other dropdowns\n        document.querySelectorAll('.dropdown-content').forEach(dropdown => {\n            if (dropdown.id !== id) {\n                dropdown.style.display = 'none';\n            }\n        });\n        document.querySelectorAll('.filter-group').forEach(group => group.classList.remove('is-open'));\n        \/\/ Toggle selected dropdown\n        const dropdown = document.getElementById(id);\n        dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';\n        if (dropdown.style.display === 'block' && dropdown.closest('.filter-group')) {\n            dropdown.closest('.filter-group').classList.add('is-open');\n        }\n        if (id === 'weeksDropdown' && jQuery('.week-picker').hasClass('hasDatepicker') && jQuery.datepicker && jQuery.datepicker._defaults) {\n            const d = jQuery.datepicker._defaults;\n            jQuery('.week-picker').datepicker('option', {\n                monthNames: d.monthNames,\n                monthNamesShort: d.monthNamesShort,\n                dayNames: d.dayNames,\n                dayNamesShort: d.dayNamesShort,\n                dayNamesMin: d.dayNamesMin,\n                prevText: d.prevText,\n                nextText: d.nextText,\n                currentText: d.currentText\n            });\n            jQuery('.week-picker').datepicker('refresh');\n        }\n    }\n\n    function hideAllDropdowns(){\n        document.querySelectorAll('.dropdown-content').forEach(dropdown => {\n            dropdown.style.display = 'none';\n        });\n        document.querySelectorAll('.filter-group').forEach(group => group.classList.remove('is-open'));\n    }\n\n    function filterItems() {\n\n        jQuery('.course_occurrence_wrapper').show();\n\n        var selectedFormat = jQuery(`[name=\"format\"]:is(:checked)`).length === 1 ? jQuery(`[name=\"format\"]:is(:checked)`).val() : null;\n        var age = parseInt(jQuery('#age').val()) || null;\n        var selectedAreas = {};\n\n        Object.keys(areaMatches).forEach(function(area) {\n            selectedAreas[area] = jQuery(`.area[value=\"${area}\"]`).is(':checked');\n        });\n\n        function getAreaMatch(title, selectedAreasMap, othersSelected) {\n            let selectedMatchFound = false; \/\/ whether it matches any selected area\n            let unselectedMatchFound = false; \/\/ whether it matches any unselected area, for the \"other\" filter logic\n            Object.keys(selectedAreasMap).forEach((area) => {\n                let keywords = areaMatches[area];\n                let selected = selectedAreasMap[area];\n                keywords.forEach((kw) => {\n                    if (selected && title.match(kw)) return selectedMatchFound = true;\n                    if (!selected && title.match(kw)) return unselectedMatchFound = true;\n                });\n            });\n            \/\/ show if it matches a selected filter of \"other\" is on and does not match any unselected filter\n            return selectedMatchFound || (othersSelected && !unselectedMatchFound);\n        }\n\n        \/\/ show selected filters\n        jQuery('[data-filter=\"format\"] .filter-button-title').css('font-weight', 'bold');\n        jQuery('[data-filter=\"format\"] .filter-button-selected').text(`: ${selectedFormat ? jQuery(`[name=\"format\"]:is(:checked)`).closest('label').text() : \"All\"}`);\n\n        jQuery('[data-filter=\"age\"] .filter-button-title').css('font-weight', age ? 'bold' : 'normal');\n        jQuery('[data-filter=\"age\"] .filter-button-selected').text(age ? `: ${age}`: '');\n\n        let anyAreas = jQuery(`.area:checked`).length > 0;\n        let niceAreas =jQuery(`.area:checked`).map((_, i) => jQuery(i).parent().text()).get().join();\n        jQuery('[data-filter=\"area\"] .filter-button-title').css('font-weight',  anyAreas ? 'bold' : 'normal');\n        jQuery('[data-filter=\"area\"] .filter-button-selected').text(anyAreas ? `: ${niceAreas}`: '');\n        jQuery('.filter-group').removeClass('has-selection');\n        if (selectedFormat) jQuery('[data-filter=\"format\"]').addClass('has-selection');\n        if (age) jQuery('[data-filter=\"age\"]').addClass('has-selection');\n        if (anyAreas) jQuery('[data-filter=\"area\"]').addClass('has-selection');\n        if (selectedWeeks.length > 0) jQuery('[data-filter=\"weeks\"]').addClass('has-selection');\n\n        \/\/ filter by format, age and dates (occurrence-wise)\n        jQuery('.course_occurrence_wrapper').each(function() {\n            var item = jQuery(this);\n            var format = item.data('format');\n            var itemAgeMin = item.data('age-min') || 0;\n            var itemAgeMax = item.data('age-max') || 100;\n            var itemStartDate = Date.parse(item.data('start-date')); \/\/ Date.parse already returns time, not date\n            var itemEndDate = Date.parse(item.data('end-date'));\n\n            var formatMatch = !selectedFormat || format === selectedFormat;\n            var ageMatch = !age || (itemAgeMin <= age && itemAgeMax >= age);\n            var dateMatch = selectedWeeks.length === 0 || \/\/ start date inside week  OR end date inside week OR week all inside start-end range\n                selectedWeeks.some(w => (w.start.getTime() <= itemStartDate && w.end.getTime() >= itemStartDate) || (w.start.getTime() <= itemEndDate && w.end.getTime() >= itemEndDate) || (itemStartDate <= w.start.getTime() && itemEndDate >= w.end.getTime())  );\n\n\n            if (formatMatch && ageMatch && dateMatch) {\n                item.show();\n            } else {\n                item.hide()\n            }\n        });\n\n        \/\/ filter by area (course-wise, not occurrence-wise)\n        jQuery('.course_wrapper').show();\n        let anyAreaSelected = jQuery('input.area:checked').length > 0; \/\/ if some filter selected\n        let othersSelected = jQuery('.area[value=\"other\"]').is(':checked'); \/\/ whether the \"other\" filter is selected\n        let groupingFactor = jQuery('.order-button.selected').val() || 'course';\n\n        if (anyAreaSelected && groupingFactor === 'date') {\n            jQuery('.course_occurrence_wrapper:visible').each(function() {\n                let occurrence = jQuery(this);\n                let title = (occurrence.data('course-title') || '').toString().toLowerCase();\n                occurrence.toggle(getAreaMatch(title, selectedAreas, othersSelected));\n            });\n        } else {\n            jQuery('.course_wrapper').each(function(){\n                let course = jQuery(this);\n                if(anyAreaSelected){ \/\/ if some filter selected\n                    let title = course.find('.course_name').text().toString().toLowerCase();\n                    course.toggle(getAreaMatch(title, selectedAreas, othersSelected));\n                }\n                \/\/  hide courses with no occurrences\n                if(course.find('.course_occurrence_wrapper:visible').length === 0) course.hide();\n            });\n        }\n\n        \/\/  hide courses with no occurrences\n        jQuery('.course_wrapper').each(function() {\n            let course = jQuery(this);\n            if(course.find('.course_occurrence_wrapper:visible').length === 0) course.hide();\n        });\n    }\n\n    function trackFilter(filter, val){\n        mixpanel.track(`attendant_form_filter_by_${filter}`, {\n            val: val\n        });\n    }\n\n\n    let suppressNextGroupByTrack = false;\n\n    jQuery(document).ready(function() {\n\n        document.addEventListener('click', function(event) {\n            if (!event.target.closest('.filter-group')) {\n                hideAllDropdowns();\n            }\n        });\n\n        \/\/ Prevent hiding dropdown when clicking inside the .filter-group\n        document.querySelectorAll('.filter-group').forEach(function(filterGroup) {\n            filterGroup.addEventListener('click', function(event) {\n                \/\/ Prevent the click inside the .filter-group from closing the dropdown\n                event.stopPropagation();\n            });\n        });\n\n        \/\/ Automatically apply filters when inputs change\n        jQuery('.format').on('change', filterItems);\n        jQuery('#age').on('input', filterItems);\n        jQuery('.area').on('change', filterItems);\n\n        \/\/ Select in person by default in some scopes (Andorra, Reus, Les Corts)\n        \n        \/\/ Track filter events\n        jQuery('.format').on('change', () => trackFilter('format', jQuery(`[name=\"format\"]:is(:checked)`).length === 1 ? jQuery(`[name=\"format\"]:is(:checked)`).val() : null));\n        jQuery('#age').on('input', () => trackFilter('age', jQuery('#age').val()));\n        jQuery('.area').on('change', (e) => jQuery(e.target).is(':checked') ? trackFilter('area', jQuery(e.target).val()) : null);\n\n\n        jQuery('#clear-area-filters').click(function() {\n            jQuery('.area').prop('checked', false);\n            filterItems();\n        });\n\n        jQuery('#clear-all-filters').click(function() {\n            jQuery('.format').prop('checked', false); \/\/ Uncheck all format checkboxes\n            jQuery('#age').val('');                   \/\/ Clear age input\n            jQuery('.area').prop('checked', false);   \/\/ Uncheck all area checkboxes\n\n            \/\/ Reset calendar\n            selectedWeeks = [];\n            jQuery('.week-picker').find('.selected-week').removeClass('selected-week').removeClass('ui-state-active');\n            selectCurrentWeek();\n\n            \/\/ Call the existing filter function to apply the reset filters\n            filterItems();\n        });\n\n        jQuery('.order-button').click(function() {\n            jQuery('.order-button').removeClass('selected');\n            jQuery(this).addClass('selected');\n            let groupingFactor = jQuery(this).val();\n            if (!suppressNextGroupByTrack) {\n                mixpanel.track('attendant_form_group_by', {\n                    factor: groupingFactor\n                });\n            }\n            suppressNextGroupByTrack = false;\n            let items = jQuery('#course_list .course_occurrence_wrapper').toArray();\n            items.sort((a, b) => {\n                if(groupingFactor === 'course'){\n                    return parseInt(jQuery(a).data('position') || 1000) - parseInt(jQuery(b).data('position') || 1000)\n                } else {\n                   if(jQuery(a).data('start-date') === jQuery(b).data('start-date')){\n                        if(jQuery(a).data('part-of-day') === jQuery(b).data('part-of-day')) {\n                            return jQuery(a).data('format') === 'inperson' ? -1 : 1;\n                        }\n                        return jQuery(a).data('part-of-day') === 'morning' ? -1 : 1;\n                   }\n                   return jQuery(a).data('start-date') < jQuery(b).data('start-date') ? -1 : 1;\n                }\n            });\n            items.forEach((el) => {\n                let val = jQuery(el).data(groupingFactor);\n                let infoLink = ` <a class=\"course-info-link\" href=\"#campus_${jQuery(el).data('course')}\">+&nbsp;info<\/a>`;\n                if(jQuery(`.course_wrapper[data-${groupingFactor}=\"${val}\"]`).length === 0) {\n                    const header = Object.assign(document.createElement(\"li\"), { className: \"course_wrapper\" });\n                    header.dataset[groupingFactor] = val;\n                    header.dataset.grouping = groupingFactor;\n                    const title = Object.assign(document.createElement(\"span\"), { textContent: `${jQuery(el).data(`${groupingFactor}-title`)}`, className: 'course_name', style: 'font-size: 120%;' });\n                    jQuery('ul#course_list').append(header);\n                    jQuery(header).append(title);\n                    if(groupingFactor === 'course') jQuery(header).append(infoLink);\n                }\n                jQuery(`.course_wrapper[data-${groupingFactor}=\"${val}\"]`).append(el);\n                jQuery(el).find('label').text(jQuery(el).data(`${groupingFactor}-text`));\n                if(groupingFactor !== 'course') jQuery(el).append(infoLink);\n                else jQuery(el).find('a').remove();\n            });\n            jQuery(`#course_list .course_wrapper[data-grouping!=\"${groupingFactor}\"]`).remove();\n            filterItems();\n        });\n\n        if(jQuery('#course_list .course_occurrence_wrapper').length > 10){\n            suppressNextGroupByTrack = true;\n            jQuery('#order-week').click();\n        }\n\n        filterItems();\n    });\n\n\n    \/\/ WEEKS FILTER CALENDAR\n    var selectedWeeks = [];\n\n    \/\/ Function to highlight the currently selected week\n    function selectCurrentWeek(){\n        window.setTimeout(function () {\n            jQuery('.week-picker').find('.ui-datepicker-current-day a').removeClass('ui-state-active');\n            jQuery('.week-picker').find('.selected-week a').addClass('ui-state-active');\n        }, 1); \/\/ Slight delay to ensure the CSS class is applied after rendering\n        jQuery('#clear-weeks-filters').toggle(selectedWeeks.length > 0); \/\/ only show clear link if there is something selected\n    }\n\n    jQuery(function() {\n        if (typeof datepickerL10n !== 'undefined') {\n            jQuery.datepicker.setDefaults(datepickerL10n);\n        }\n        const currentRegional = (courseFiltersLang !== 'en' && jQuery.datepicker && jQuery.datepicker.regional && jQuery.datepicker.regional[courseFiltersLang])\n            ? jQuery.datepicker.regional[courseFiltersLang]\n            : {};\n        if (courseFiltersLang !== 'en' && jQuery.datepicker && jQuery.datepicker.regional && jQuery.datepicker.regional[courseFiltersLang]) {\n            jQuery.datepicker.setDefaults(jQuery.datepicker.regional[courseFiltersLang]);\n        }\n\n        \/\/ Attach click event to the button to toggle the calendar\n        jQuery('#show-calendar-btn').on('click', function () {\n            jQuery('.calendar-container').toggle(); \/\/ Show\/hide the calendar container\n        });\n\n        jQuery('#clear-weeks-filters').click(function() {\n            selectedWeeks = [];\n            jQuery('.week-picker').find('.selected-week').removeClass('selected-week').removeClass('ui-state-active');\n            selectCurrentWeek();\n            filterItems();\n        });\n\n        \/\/ Initialize\/reinitialize datepicker to ensure regional strings are applied.\n        if (jQuery('.week-picker').hasClass('hasDatepicker')) {\n            jQuery('.week-picker').datepicker('destroy');\n        }\n        jQuery('.week-picker').datepicker(jQuery.extend({}, currentRegional, {\n            showOtherMonths: true, \/\/ Display days from adjacent months\n            selectOtherMonths: true, \/\/ Allow selection of days from adjacent months\n            firstDay: 1, \/\/ Set Monday as the first day of the week\n\n            \/\/ Event triggered when a date is selected\n            onSelect: function(dateText, inst) {\n                var date = jQuery(this).datepicker('getDate'); \/\/ Get the selected date\n                let startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1); \/\/ Calculate start of the week\n                let endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7); \/\/ Calculate end of the week\n\n                if(selectedWeeks.some(week => week.start.getTime() === startDate.getTime())){\n                    \/\/ Remove the week from the selection\n                    selectedWeeks = selectedWeeks.filter(week => week.start.getTime() !== startDate.getTime());\n                } else {\n                    \/\/ Add the week to the selection\n                    selectedWeeks.push({ start: startDate, end: endDate });\n                }\n\n                selectCurrentWeek(); \/\/ Highlight the current week\n                filterItems();\n            },\n\n            \/\/ Custom rendering for each day in the calendar\n            beforeShowDay: function(date) {\n                \/\/ Check if the current date falls within any selected week\n                var isInSelectedWeek = selectedWeeks.some(week => date >= week.start && date <= week.end);\n                var cssClass = isInSelectedWeek ? 'ui-state-active ui-datepicker-current-day selected-week' : '';\n                return [true, cssClass];\n            },\n\n            \/\/ Triggered when the user changes the month or year\n            onChangeMonthYear: function(year, month, inst) {\n                selectCurrentWeek(); \/\/ Reapply the week highlight after changing the month\/year\n            }\n        }));\n\n        \/\/ Add hover effect to highlight an entire week when the user hovers over a row\n        jQuery(document).on('mousemove', '.week-picker .ui-datepicker-calendar tr', function () {\n            jQuery(this).find('td a').addClass('ui-state-hover');\n        });\n\n        \/\/ Remove the hover effect when the user stops hovering over a row\n        jQuery(document).on('mouseleave', '.week-picker .ui-datepicker-calendar tr', function () {\n            jQuery(this).find('td a').removeClass('ui-state-hover');\n        });\n\n\n    });\n<\/script>\n          <div style=\"margin-left: 10px\">\n              <ul id=\"course_list\">\n\n                              <li style='margin-bottom: 15px' class=\"course_wrapper\" data-grouping=\"course\" data-course=\"16\">\n                  <span class='course_name' style=\"font-size: 120%;\">3D Video Games with Unity (Level 1)<\/span> <a href=\"#campus_16\">+ info<\/a>\n                  <div style=\"margin-left: 10px; margin-top: 5px;\">\n                                                                <div class=\"course_occurrence_wrapper\"\n                           data-age-max=\"\" data-age-min=\"12\"\n                           data-format=\"online\"\n                           data-position=\"\"\n                           data-course=\"16\"\n                           data-course-text=\"6th, 7th, 8th, 9th and 10th of July (Morning)\"\n                           data-course-title=\"3D Video Games with Unity (Level 1)\"\n                           data-date=\"6th, 7th, 8th, 9th and 10th of July\"\n                           data-part-of-day=\"morning\"\n                           data-date-text=\"3D Video Games with Unity (Level 1) (Morning)\"\n                           data-date-title=\"6th, 7th, 8th, 9th and 10th of July\"\n                           data-start-date=\"2026-07-06\" data-end-date=\"2026-07-10\"\n                      >\n                        <input type='hidden' class=\"full_price\" value='140' data-discounted-price='140' data-student-price='126' data-pioneer-price='112'  data-needs-computer='' data-sibling-discount='10' data-computer-price='0'>\n                        <input type='hidden' class=\"complement\" value='0' data-complement-price='' data-complement-name='' data-is-optional-complement=''>\n                                                <input class='course' style='width:15px;' type='checkbox' data-online=\"online\" data-course=\"5433\" id='course_5433'  data-volume-accum=\"1\"\/>\n                                                    <label for='course_5433' style=\"\">6th, 7th, 8th, 9th and 10th of July (Morning)<\/label><a href='#' class='attendants' style='margin-left: 10px'><\/a>\n                                                  <span class=\"form-course-online-tag\" title=\"It will take place through video conference\">Online<\/span>\n                                                                                                                                        <span style=\"color: #3cb043; cursor: help; font-weight: bold;\" title=\"The camp will be in English\">\n                              en                              <\/span>\n                                                                                                    <div class='attendants_editor' style='position:absolute; display:none; background: white; padding: 10px; margin-left:5px;z-index: 100'><\/div>\n                      <\/div>\n                                      <\/div>\n                <\/li>\n                              <li style='margin-bottom: 15px' class=\"course_wrapper\" data-grouping=\"course\" data-course=\"75\">\n                  <span class='course_name' style=\"font-size: 120%;\">ChatGPT and other AI tools<\/span> <a href=\"#campus_75\">+ info<\/a>\n                  <div style=\"margin-left: 10px; margin-top: 5px;\">\n                                                                <div class=\"course_occurrence_wrapper\"\n                           data-age-max=\"\" data-age-min=\"12\"\n                           data-format=\"online\"\n                           data-position=\"\"\n                           data-course=\"75\"\n                           data-course-text=\"20th, 21st, 22nd, 23rd and 24th of July (Morning)\"\n                           data-course-title=\"ChatGPT and other AI tools\"\n                           data-date=\"20th, 21st, 22nd, 23rd and 24th of July\"\n                           data-part-of-day=\"morning\"\n                           data-date-text=\"ChatGPT and other AI tools (Morning)\"\n                           data-date-title=\"20th, 21st, 22nd, 23rd and 24th of July\"\n                           data-start-date=\"2026-07-20\" data-end-date=\"2026-07-24\"\n                      >\n                        <input type='hidden' class=\"full_price\" value='140' data-discounted-price='140' data-student-price='126' data-pioneer-price='112'  data-needs-computer='' data-sibling-discount='10' data-computer-price='0'>\n                        <input type='hidden' class=\"complement\" value='0' data-complement-price='' data-complement-name='' data-is-optional-complement=''>\n                                                <input class='course' style='width:15px;' type='checkbox' data-online=\"online\" data-course=\"5437\" id='course_5437'  data-volume-accum=\"1\"\/>\n                                                    <label for='course_5437' style=\"\">20th, 21st, 22nd, 23rd and 24th of July (Morning)<\/label><a href='#' class='attendants' style='margin-left: 10px'><\/a>\n                                                  <span class=\"form-course-online-tag\" title=\"It will take place through video conference\">Online<\/span>\n                                                                                                                                        <span style=\"color: #3cb043; cursor: help; font-weight: bold;\" title=\"The camp will be in English\">\n                              en                              <\/span>\n                                                                                                    <div class='attendants_editor' style='position:absolute; display:none; background: white; padding: 10px; margin-left:5px;z-index: 100'><\/div>\n                      <\/div>\n                                      <\/div>\n                <\/li>\n                              <li style='margin-bottom: 15px' class=\"course_wrapper\" data-grouping=\"course\" data-course=\"10\">\n                  <span class='course_name' style=\"font-size: 120%;\">Introduction to Programming with the Codelearn Method<\/span> <a href=\"#campus_10\">+ info<\/a>\n                  <div style=\"margin-left: 10px; margin-top: 5px;\">\n                                                                <div class=\"course_occurrence_wrapper\"\n                           data-age-max=\"\" data-age-min=\"12\"\n                           data-format=\"online\"\n                           data-position=\"\"\n                           data-course=\"10\"\n                           data-course-text=\"27th, 28th, 29th, 30th and 31st of July (Morning)\"\n                           data-course-title=\"Introduction to Programming with the Codelearn Method\"\n                           data-date=\"27th, 28th, 29th, 30th and 31st of July\"\n                           data-part-of-day=\"morning\"\n                           data-date-text=\"Introduction to Programming with the Codelearn Method (Morning)\"\n                           data-date-title=\"27th, 28th, 29th, 30th and 31st of July\"\n                           data-start-date=\"2026-07-27\" data-end-date=\"2026-07-31\"\n                      >\n                        <input type='hidden' class=\"full_price\" value='140' data-discounted-price='140' data-student-price='126' data-pioneer-price='112'  data-needs-computer='' data-sibling-discount='10' data-computer-price='0'>\n                        <input type='hidden' class=\"complement\" value='0' data-complement-price='' data-complement-name='' data-is-optional-complement=''>\n                                                <input class='course' style='width:15px;' type='checkbox' data-online=\"online\" data-course=\"5442\" id='course_5442'  data-volume-accum=\"1\"\/>\n                                                    <label for='course_5442' style=\"\">27th, 28th, 29th, 30th and 31st of July (Morning)<\/label><a href='#' class='attendants' style='margin-left: 10px'><\/a>\n                                                  <span class=\"form-course-online-tag\" title=\"It will take place through video conference\">Online<\/span>\n                                                                                                                                        <span style=\"color: #3cb043; cursor: help; font-weight: bold;\" title=\"The camp will be in English\">\n                              en                              <\/span>\n                                                                                                    <div class='attendants_editor' style='position:absolute; display:none; background: white; padding: 10px; margin-left:5px;z-index: 100'><\/div>\n                      <\/div>\n                                      <\/div>\n                <\/li>\n              \n              \n            <\/ul>\n          <\/div>\n\n          <div class=\"clear\"><\/div><div class='row summary_wrapper' style='margin-top: 20px'>\n            <div class='label_title' id='attendancies_header' style='display:none' >Summary<\/div>\n            <ul id=\"summary_attendancies\">\n              <!--<li style=\"clear:both\"><hr>Descomptes per Germans <span style=\"float:right; color:green;\">-30\u20ac<\/span><\/li>-->\n            <\/ul>\n            <ul id='summary_complements'>\n              <li style=\"clear:both; display:none\" id='complements_header'><hr>Required material: <span style=\"float:right\">Cost <span style=\"margin-left: 30px\">Quantity<\/span><\/li>\n            <\/ul>\n            <ul id='summary_custom_complements'>\n              <li style=\"clear:both; display:none\" id='custom_complements_header'><hr>Supplements: <span style=\"float:right\">Total price <span style=\"margin-left: 30px\">Take<\/span><\/li>\n            <\/ul>\n            <a href=\"javascript:void(0);\" onclick=\"jQuery('#summary-gift-cards, #summary-coupons').show();jQuery(this).remove();\">Do you have a coupon or a gift card?<\/a>\n            <ul id=\"summary-gift-cards\" style=\"display:none;\">\n\n                <li style=\"clear: both;\" id=\"gift.cards_header\"><hr>Gift card: <span style=\"float:right\">\n                    <span class=\"gift-card-balance\">Available balance<\/span>\n                    <span class=\"gift-card-amount\"> To discount<\/span>\n                  <\/span><\/li>\n\n                <li class=\"gift-card gift-card_inputs\" style=\"margin-left: 10px; clear: both; display: list-item;\">\n                    <label>Key:<\/label>\n                    <input type=\"text\" class=\"gift-card-key-input\" style=\"width:180px;\">\n\n                     <label>PIN:<\/label>\n                    <input type=\"text\" class=\"gift-card-pin-input\" style=\"width:50px;\">\n\n                    <button class=\"gift-card-ok-btn\" type=\"button\">Add<\/button>\n                    <span id=\"gift-card-errors\"><\/span>\n                  <\/li>\n            <\/ul>\n            <ul id=\"summary-coupons\" style=\"display:none;\">\n                <li style=\"clear: both;\" ><hr>Coupon:                <li class=\"coupon-inputs\" style=\"margin-left: 10px; clear: both; display: list-item;\">\n                    <label>Key<\/label>\n                    <input type=\"text\" class=\"coupon-key-input\" style=\"width:180px;\">\n\n                    <button class=\"coupon-ok-btn\" type=\"button\">Add<\/button>\n                    <span id=\"coupon-errors\"><\/span>\n                  <\/li>\n            <\/ul>\n          <\/div>\n\n          <div class=\"clear\"><\/div><div class='row field_textarea alignleft form-footer-notes' style=''>\n            <label class='label_title' for='conexus_missatge'>Would you like to add something else?<\/label>\n            <textarea class='textarea textarea_middle' name='notes' rows='10' ><\/textarea>\n          <\/div><div class=\"clear\"><\/div>\n\n          <div class='row alignleft select omega form-footer-photos'>\n            <label class='label_title' for=\"allows_photos\">Can we take photos and share them on social media?<\/label>\n\t\t\t\t  <span class=\"cuteselect\"><select style=\"width: 200px\" class='select_styled tfuse_option' name='allows_photos' id='allows_photos'>\n\t              <option value=''><\/option>\n\t              <option value='true'>Yes, I agree<\/option>\n\t              <option value='false'>No, I don't agree<\/option>\n\t            <\/select><\/span>\n\t          <\/div>\n\n          <div id=\"form-footer-consents\">\n            <div class='row checkbox input_styled alignleft'>\n              <input class='' style='width:15px;' type='checkbox' name='newsletter' id='newsletter'\/>\n              <label for='newsletter'>I would like to receive the newsletter<\/label>\n            <\/div>\n            <div class='row checkbox input_styled alignleft  omega '>\n              <input class='' style='width:15px;' type='checkbox' name='legal' id='legal' \/>\n              <label for='legal'>I agree to the <a target=\"_blank\" href=\"\/\/codelearn.com\/terms\/\">Terms and Conditions<\/a><\/label>\n            <\/div>\n\n          \n            <div class=\"clear\"><\/div><div class=\"clear\"><\/div>\n                <div class=\"row rowSubmit clearfix\" style=\"width:100%; min-width: auto;\">\n                    <input type=\"submit\" id=\"send_form\" class=\"btn-submit et_pb_button\" name=\"submit\" title=\"Submit\" data-original-val=\"Pay now\" value=\"Pay now\" \/>\n                    <input id=\"sending\" class=\"btn-submit\" style=\"border:0 none;display: none;\" value=\"Sending ...\"\/>\n                        <span class=\"link-reset\" style='font-size: 1.2em; position: relative; margin-bottom: 10px; float: right; top: 0;'>TOTAL:\n                            <span class='old_price' style='text-decoration: line-through; margin-right: 10px;'><\/span>\n                            <span class='new_price' style='font-weight: bold; font-size: 1.5em'>0 \u20ac<\/span>\n                        <\/span>\n                <img id=\"sending_img\" src=\"\/\/codelearn.cat\/wp-content\/themes\/conexus-parent\/images\/loading.gif\" alt=\"Sending\" style=\"margin-bottom:-10px; display: none; border:0;\" \/><\/div>\n          <\/div><\/form><\/div><div id=\"form_messages\" class=\"submit_message\" ><\/div><\/div>\n\n\n    <script type='text\/javascript'>\n\n      var Codelearn = Codelearn || {}\n      Codelearn.attendants = {};\n      Codelearn.complements = {'complement': {}, 'computer': {}, 'custom_complements': {}};\n      Codelearn.last_computer_selection = 0;\n      Codelearn.pioneer = {'always_show': false};\n      Codelearn.giftCards = [];\n      Codelearn.coupon = {};\n      Codelearn.currency = 'EUR';\n\n      Number.prototype.round = function(places) {\n        return +(Math.round(this + \"e+\" + places) + \"e-\" + places);\n      };\n\n      (function($) {\n\n        if($('.course[data-online=\"online\"]').length === 0 || $('.course[data-online=\"onsite\"]').length === 0){\n          $('#course-filter-wrapper').hide();\n        }\n        else{\n          $('.course-filter').click(function(){filterCourses(this)});\n          $('#filter-all').click();\n        }\n\n        function filterCourses(el){\n          $('.course-filter').css('text-decoration','none');\n          $(el).css('text-decoration','underline');\n          $('.course').closest('li').show();\n          $('.course').closest('div').show();\n          if(el.id == \"filter-online\") {\n            $('.course[data-online!=\"online\"]').each(function() {\n                let occurrence = $(this)\n                if (occurrence.closest('li').find('.course[data-online!=\"onsite\"]').length == 0) occurrence.closest('li').hide();\n                else occurrence.closest('div').hide();\n            })\n          } else if(el.id == \"filter-onsite\") {\n            $('.course[data-online!=\"onsite\"]').each(function() {\n                let occurrence = $(this)\n                if (occurrence.closest('li').find('.course[data-online!=\"online\"]').length == 0) occurrence.closest('li').hide();\n                else occurrence.closest('div').hide();\n            })\n          }\n        }\n\n          function check_adult_courses(){\n              \/\/ check if any course has min-age >= 18\n              let adults = jQuery('input.course').toArray().some(el => parseInt(jQuery(el).closest('.course_occurrence_wrapper').data('age-min')) >= 18 )\n              let nonAdults = jQuery('input.course').toArray().some(el => parseInt(jQuery(el).closest('.course_occurrence_wrapper').data('age-min')) < 18 )\n              if(adults && !nonAdults){\n                  jQuery('#siblings_selector').hide();\n                  jQuery('.is_student').prop('checked', false).parent().hide();\n              }\n              else{\n                  jQuery('label[for=\"sib_qty\"]').text(\"How many siblings would you like to enroll in the course?\");\n                  jQuery('.is_student').parent().show();\n              }\n          }\n        check_adult_courses();\n\n        function calculate_price(keep_summary, keep_complements) {\n          var new_total = 0, old_total = 0, course_price, keep_s = keep_summary || false, keep_c = keep_complements || false;\n          var courses_discount = {base: {}, student: {}, sibling: {}, volume: {}, coupon: {}};\n          var assignedCustomComponents = {}; \/\/ used to keep track of how many times we already assigned each component to a student so we only assign as many as the select val\n          $('#form-attendant').toggleClass('has-selected-courses', $(\".course:checked\").length > 0);\n\n          for (var i = 1; i <= students_amount(); i++) {\n            $(\".course:checked\").each(function() {\n              var course_id = $(this).data('course')\n              if (Codelearn.attendants[course_id][i]) {\n                var price_info = $(this).siblings('.full_price')\n                var original_price = parseFloat(price_info.val());\n                old_total += original_price;\n                if (!courses_discount.base[course_id]) { courses_discount.base[course_id] = 0; }\n                courses_discount.base[course_id] += (original_price - price_info.data('discounted-price'))\n\n                course_price = parseFloat(student_dependendent_price(i, $(this).siblings('.full_price')));\n                if (!courses_discount.student[course_id]) { courses_discount.student[course_id] = 0; }\n                courses_discount.student[course_id] += price_info.data('discounted-price') - course_price;\n\n                \/\/ coupon\n                if (!courses_discount.coupon[course_id]) { courses_discount.coupon[course_id] = 0; }\n                if (Codelearn.coupon && Codelearn.coupon.amount) {\n                    courses_discount.coupon[course_id] += Codelearn.coupon.amount;\n                    course_price -= Codelearn.coupon.amount;\n                }\n\n                new_total += course_price;\n                Codelearn.attendants[course_id][i] = course_price;\n              }\n            })\n\n          }\n\n          \/\/ clear any possible missing price if we have reduced the number of students\n          for (var i = students_amount() + 1; i <= 4; i++) {\n            $(\".course:checked\").each(function() {\n              var course_id = $(this).data('course')\n              if (Codelearn.attendants[course_id][i]) {\n                Codelearn.attendants[course_id][i] = false\n              }\n            })\n          }\n\n          \/\/ second pass, siblings \/ volume discount\n          var volume_factor = courses_amount_factor();\n          if (volume_factor != 1) { \/\/ for volume accumulable courses\n            $(\".course:checked[data-volume-accum=1]\").each(function() {\n              var course_id = $(this).data('course')\n              for (var i = 1; i <= students_amount(); i++) {\n                if (Codelearn.attendants[course_id][i]) {\n                  var discount = volume_factor;\n                  var new_price = Codelearn.attendants[$(this).data('course')][i] * discount;\n                  if (!courses_discount.volume[course_id]) { courses_discount.volume[course_id] = 0; }\n                  courses_discount.volume[course_id] += Codelearn.attendants[course_id][i] - new_price\n                  Codelearn.attendants[course_id][i] = new_price\n                }\n              }\n            })\n          } else if (students_amount() > 1) {\n            $(\".course:checked\").each(function() {\n              var max_price = 0, max_student = 1, course_id = $(this).data('course')\n              for (var i = 1; i <= students_amount(); i++) {\n                if (Codelearn.attendants[course_id][i] > max_price) {\n                  max_price = Codelearn.attendants[course_id][i]\n                  max_student = i;\n                }\n              }\n              \/\/ now we know who not to discount, do the others\n              for (var i = 1; i <= students_amount(); i++) {\n                if (i != max_student && Codelearn.attendants[course_id][i]) {\n                  var price_info = $(this).siblings('.full_price')\n                  var discount = (100 - parseFloat(price_info.data('sibling-discount'))) \/ 100\n                  var new_price = Codelearn.attendants[$(this).data('course')][i] * discount\n                  if (!courses_discount.sibling[course_id]) { courses_discount.sibling[course_id] = 0; }\n                  courses_discount.sibling[course_id] += Codelearn.attendants[course_id][i] - new_price\n                  Codelearn.attendants[course_id][i] = new_price\n                }\n              }\n            })\n          }\n\n          if (!keep_s) {\n            if(!keep_c)$('#complements_header').hide();\n            if(!keep_c)$('#custom_complements_header').hide();\n            $('#attendancies_header').hide()\n            $('#needed_computers').remove()\n            $('#summary_attendancies li.course').remove()\n            if(!keep_c) $('#summary_complements li.complement').remove();\n            if(!keep_c) $('#summary_custom_complements li.complement').remove();\n            var needs_computer = false\n            var computer_price = 0.0\n            var custom_complement_amounts = {}\n\n            $(\".course:checked\").each(function() {\n              var course_total = 0, course_old_total = 0, course_attendancies = 0;\n              for (var i = 1; i <= students_amount(); i++) {\n                if (Codelearn.attendants[$(this).data('course')][i]) {\n                  course_old_total += parseInt($(this).siblings('.full_price').val());\n                  course_total += Codelearn.attendants[$(this).data('course')][i]\n                  course_attendancies +=1\n                }\n              }\n\n              \/\/summary\n              $('#attendancies_header').fadeIn(2000);\n              var occurrenceWrapper = $(this).closest('.course_occurrence_wrapper');\n              var courseTitle = occurrenceWrapper.data('course-title') || $(this).closest('li').find('> .course_name').first().text();\n              var occurrenceText = occurrenceWrapper.data('course-text') || $(this).siblings('label').first().text();\n              var course_name = courseTitle;\n              if (occurrenceText && occurrenceText !== courseTitle) {\n                course_name += ' - ' + occurrenceText;\n              }\n              var course_total_text = course_total.round(2) + \"\u20ac\"\n              var course_id = $(this).data('course')\n              if (course_total != course_old_total) {\n                var course_old_total_text = course_old_total.round(2) + \"\u20ac\"\n                var savings = \"\"\n                if (courses_discount.base[course_id]) savings += \"<br>Base discount: \" + courses_discount.base[course_id].round(2) + '\u20ac'\n                if (courses_discount.student[course_id]) savings += \"<br>Discount for student: \" + courses_discount.student[course_id].round(2) + '\u20ac'\n                if (courses_discount.sibling[course_id]) savings += \"<br>Discount for siblings: \" + courses_discount.sibling[course_id].round(2) + '\u20ac'\n                if (courses_discount.volume[course_id]) savings += \"<br>Discount for several weeks: \" + courses_discount.volume[course_id].round(2) + '\u20ac'\n                if (courses_discount.coupon[course_id]) savings += \"<br>Coupon discount: \" + courses_discount.coupon[course_id].round(2) + '\u20ac'\n                savings += \"<br><strong>Total saved: \" + (course_old_total - course_total).round(2) + \"\u20ac<\/strong>\"\n                $('#summary_attendancies').append($('<li class=\"course\" style=\\'clear:both;\\'><hr>' + course_name + '<span style=\"float:right; text-align: right;\"><span style=\"font-weight: bold; color: green; font-size: 1.2em\">' + course_total_text + '<\/span><br>Normal price: <span style=\"text-decoration: line-through\">' + course_old_total_text + '<\/span>' + savings + '<\/li>').hide().fadeIn(2000));\n              } else {\n                $('#summary_attendancies').append($('<li class=\"course\" style=\"clear:both;\"><hr>' + course_name + '<span style=\"float:right\">' + course_total_text + '<\/span><\/li>').hide().fadeIn(2000));\n              }\n\n              \/\/ complements\n              var course = this;\n              if(!keep_c){$(this).siblings('.complement').each(function(){\n                var complement_name = $(this).data('complement-name');\n                if (complement_name && course_attendancies > 0) {\n                  var complement_price = parseFloat($(this).data('complement-price'));\n                  var complement_code = hashCode(complement_name);\n                  if (parseInt($(this).data('complement-id') || 0) == 0) {\n                    if ($('#summary_complements li.complement[data-compl-code='+complement_code+']').length == 0) {\n                      $('#complements_header').show()\n                      if ($(this).data('is-optional-complement')) {\n                        var options_text = generate_options_text(students_amount());\n                        $('#summary_complements').append($('<li class=\"complement\" data-compl-code=\"'+ complement_code +'\" id=\"compl_course_' + $(course).data('course') + '\" style=\"margin-left:10px;clear:both\">' + complement_name + '<span style=\"float:right\">' + complement_price.round(2) + '\u20ac <span style=\"margin-left: 30px\"><select style=\"height: auto;min-width:55px\">'+options_text+'<\/select><\/span><\/span><\/li>').hide().fadeIn(2000))\n                        $(\"#compl_course_\" + $(course).data('course') + ' select').val(students_amount());\n                      } else {\n                        $('#summary_complements').append($('<li class=\"complement\" data-compl-code=\"'+ complement_code +'\" id=\"compl_course_' + $(course).data('course') + '\" style=\"margin-left:10px;clear:both\">' + complement_name + '<span style=\"float:right\">' + complement_price.round(2) + '\u20ac <span style=\"margin-left: 30px; min-width: 55px; display: inline-block; text-align: center\">' + course_attendancies + '<\/span><\/span><\/li>').hide().fadeIn(2000))\n                      }\n                    }\n                  } else { \/\/ custom complements\n\n                      var selector = '#summary_custom_complements .complement[data-compl-code=' + complement_code + ']'\n                      $(selector).remove(); \/\/ we will update the price\n                      if (!custom_complement_amounts[complement_code]) custom_complement_amounts[complement_code] = 0;\n\n                      for (var i = 1; i <= students_amount(); i++) {\n                          if (Codelearn.attendants[$(course).data('course')][i]) {\n                              if ($(this).data('is-optional-complement')) $('#custom_complements_header').show()\n                              else $('#complements_header').show()\n                              custom_complement_amounts[complement_code]  += 1;\n                          }\n                      }\n\n                      if ($(this).data('is-optional-complement')) {\n                          if($(this).data('amount-selector')){\n                              var options_text = generate_options_text(custom_complement_amounts[complement_code]);\n                              $('#summary_custom_complements').append($('<li class=\"complement\" data-compl-code=\"'+ complement_code +'\" data-custom-compl-course=\"' + $(course).data('course') + '\" style=\"margin-left:10px;clear:both\">' + complement_name + '<span style=\"float:right\">' + complement_price.round(2) + '\u20ac <span style=\"margin-left: 30px\"><select style=\"height: auto;min-width:55px\">'+options_text+'<\/select><\/span><\/span><\/li>').hide().fadeIn(2000));\n                          }\n                          else{\n                              var options_text = `<option value=0>No<\/option><option value=${custom_complement_amounts[complement_code]}>S\u00ed<\/option>`;\n                              $('#summary_custom_complements').append($('<li class=\"complement\" data-compl-code=\"'+ complement_code +'\" data-custom-compl-course=\"' + $(course).data('course') + '\" style=\"margin-left:10px;clear:both\">' + complement_name + '<span style=\"float:right\">' + (custom_complement_amounts[complement_code] * complement_price.round(2)) + '\u20ac <span style=\"margin-left: 30px\"><select style=\"height: auto;min-width:55px\">'+options_text+'<\/select><\/span><\/span><\/li>').hide().fadeIn(2000));\n                          }\n                      } else {\n                          $('#summary_complements').append($('<li class=\"complement\" data-compl-code=\"'+ complement_code +'\" id=\"compl_course_' + $(course).data('course') + '\" style=\"margin-left:10px;clear:both\">' + complement_name + '<span style=\"float:right\">' + complement_price.round(2) + '\u20ac <span style=\"margin-left: 30px; min-width: 55px; display: inline-block; text-align: center\">' + course_attendancies + '<\/span><\/span><\/li>').hide().fadeIn(2000))\n                      }\n\n                  }\n                }\n              })}\n\n              needs_computer = needs_computer || $(this).siblings('.full_price').data('needs-computer');\n              if (needs_computer) {\n                computer_price = computer_price + parseFloat($(this).siblings('.full_price').data(\"computer-price\") || 0.0);\n                var options_text = generate_options_text(students_amount());\n                if ($('#needed_computers').length > 0) $('#needed_computers').remove();\n                $('#summary_complements').append($('<li id=\"needed_computers\" style=\"margin-left:10px;clear:both\">Laptop<span style=\"font-size:0.85em; margin-left: 5px\">(add in case you can\\'t bring yours)<\/span><span style=\"float:right\">' + computer_price.round(2) + '\u20ac <span style=\"margin-left: 30px\"><select style=\"height: auto;min-width:55px\">'+options_text+'<\/select><\/span><\/span><\/li>').hide().fadeIn(2000))\n                $(\"#needed_computers select\").val(Codelearn.last_computer_selection);\n              }\n\n            })\n          }\n\n          \/\/ third pass, adds the complements\n          old_total = 0, new_total = 0\n          $(\".course:checked\").each(function() {\n            Codelearn.complements['complement'][$(this).data('course')] = {}\n            Codelearn.complements['custom_complements'][$(this).data('course')] = {}\n            Codelearn.complements['computer'][$(this).data('course')] = {}\n            for (var i = 1; i <= students_amount(); i++) {\n              if (Codelearn.attendants[$(this).data('course')][i]) {\n                var price_info = $(this).siblings('.full_price')\n                old_total += parseFloat(price_info.val());\n                course_price = Codelearn.attendants[$(this).data('course')][i]\n                var course = this;\n                $(this).siblings('.complement').each(function(){\n                  var complement_name = $(this).data('complement-name');\n                  var complement_code = hashCode(complement_name);\n                  var complement_price = parseFloat($(this).data('complement-price'));\n                  if (complement_name && $('#compl_course_' + $(course).data('course')+'[data-compl-code='+complement_code+']').length > 0) {\n                    if ($(this).data('is-optional-complement')) {\n                      if (parseInt($('#compl_course_' + $(course).data('course')).find('select').val()) >= i) { \/\/ selected for this student\n                        old_total += complement_price\n                        course_price += complement_price\n                        Codelearn.complements['complement'][$(course).data('course')][i] = true;\n                      }\n                    } else { \/\/ no opcional\n                      old_total += complement_price\n                      course_price += complement_price\n                      Codelearn.complements['complement'][$(course).data('course')][i] = true;\n                    }\n                  } else if (complement_name && (this_compl =$('.complement[data-compl-code='+complement_code+']')).length > 0) {\n                    if(!assignedCustomComponents[complement_code]) assignedCustomComponents[complement_code] = 0;\n                    if (parseInt(this_compl.find('select').val()) > assignedCustomComponents[complement_code]) {\n                      if ($(this).data('complement-id')) { \/\/ else its a component from the course (eg minecraft lic)\n                        old_total += complement_price\n                        course_price += complement_price\n                        var complement_id = parseInt($(this).data('complement-id'))\n                        var custom_complements = Codelearn.complements['custom_complements'][$(course).data('course')]\n                        if (!custom_complements[i]) {\n                          custom_complements[i] = []\n                        }\n                        custom_complements[i].push(complement_id);\n                        assignedCustomComponents[complement_code] += 1;\n                      }\n                    }\n                  }\n                });\n                if (price_info.data('needs-computer')) {\n                  if ((pc_amount = parseInt($('#needed_computers').find('select').val())) >= i) {\n                    Codelearn.last_computer_selection = pc_amount\n                    var computer_price = parseFloat(price_info.data('computer-price') || 0.0);\n                    Codelearn.complements['computer'][$(this).data('course')][i] = true\n                    old_total += computer_price\n                    course_price += computer_price\n                  }\n                }\n                new_total += course_price;\n                Codelearn.attendants[$(this).data('course')][i] = course_price;\n              }\n            }\n          })\n\n          \/\/ GIFT CARDS\n            for(card of Codelearn.giftCards){\n                if(new_total - card.current_balance >= 0){\n                    $(`.gift-card[data-key=${card.key}]`).find('.gift-card-amount').text(card.current_balance.toString() + card.pretty_currency.toString());\n                    new_total = new_total - card.current_balance;\n                }\n                else{\n                    $(`.gift-card[data-key=${card.key}]`).find('.gift-card-amount').text(new_total.toString() + card.pretty_currency.toString());\n                    new_total = 0;\n                }\n            }\n\n          $('#final_price').val(new_total.round(2) + \" \u20ac\");\n          $('.new_price').html(new_total.round(2) + \" \u20ac\")\n\n          if (new_total < old_total) {\n            $('.old_price').html(old_total.round(2) + \" \u20ac\").show();\n          } else {\n            $('.old_price').hide()\n          }\n\n          if(new_total == 0){\n            $(\"select[name='payment_type']\").val('transfer');\n            $(\"select[name='payment_type']\").change();\n            $('#payment_type_selector').hide();\n            $('#extra-course-enrollment-form #send_form').val('Send');\n          }\n          else {\n            if($('.is_student:checked').length == 0){\n              $('#payment_type_selector').show();\n            }\n            $('#extra-course-enrollment-form #send_form').val($('#extra-course-enrollment-form #send_form').data('original-val'));\n          }\n\n        }\n\n        function generate_options_text(max) {\n          var options = ''\n          for(var i=0; i<= max; i++) {\n            options += '<option value=\"'+i+'\">'+i+'<\/option>'\n          }\n          return options;\n        }\n\n        function hashCode(string){\n          string = string || \"\"\n          var hash = 0;\n          if (string.length == 0) return hash;\n          for (i = 0; i < string.length; i++) {\n            char = string.charCodeAt(i);\n            hash = ((hash<<5)-hash)+char;\n            hash = hash & hash; \/\/ Convert to 32bit integer\n          }\n          return hash;\n        }\n\n\n\n        function courses_amount() {\n          var amount = 0;\n          for (var i = 1; i <= students_amount(); i++) {\n            $(\".course:checked\").each(function() {\n              if(typeof Codelearn.attendants[$(this).data('course')][i] == 'number') {\n                amount++\n              }\n            })\n          }\n          return amount;\n        }\n\n        function volume_discountable_courses_amount() {\n          var amount = 0;\n          for (var i = 1; i <= students_amount(); i++) {\n            $(\".course:checked[data-volume-accum=1]\").each(function() {\n              if(Codelearn.attendants[$(this).data('course')][i]) {\n                amount++\n              }\n            })\n          }\n          return amount;\n        }\n\n        function courses_amount_factor() {\n          var discounts = {\"0\":0,\"default\":0};\n          var amount = volume_discountable_courses_amount()\n          if (discounts) {\n            var selected_discount = parseInt(discounts[amount]);\n            if (! (amount in discounts)) {\n              selected_discount = parseInt(discounts['default'])\n            }\n            return parseFloat((100 - selected_discount) \/ 100)\n          }\n          return 1;\n        }\n\n        function student_dependendent_price(i, el) {\n          if ($(\"#is_student_\" + i).is(\":checked\")) {\n            if ($(\"#is_pioneer_\" + i).is(\":checked\")) {\n              return el.data('pioneer-price')\n            }\n            return el.data('student-price')\n          }\n          if(Codelearn.pioneer.always_show && $(\"#is_pioneer_\" + i).is(\":checked\")) {\n            return el.data('pioneer-price')\n          }\n          return el.data('discounted-price')\n        }\n\n        function show_student_fields() {\n          switch (students_amount()) {\n            case 1:\n              $('#student_2, #student_3, #student_4').hide().find('input').prop('checked', false);\n              $('#single_student_label').show();\n              $('#multiple_student_label').hide();\n              break;\n            case 2:\n              $('#student_2').show();\n              $('#student_3, #student_4').hide().find('input').prop('checked', false);\n              break;\n            case 3:\n              $('#student_2, #student_3').show();\n              $('#student_4').hide().find('input').prop('checked', false);\n              break;\n            case 4:\n              $('#student_2, #student_3, #student_4').show();\n              break;\n          }\n          if (students_amount() > 1) {\n            $('#single_student_label').hide();\n            $('#multiple_student_label').show();\n          }\n        }\n\n        function students_amount() {\n          return parseInt($(\"#students_amount\").val())\n        }\n\n        function show_is_pioneer(element) {\n          var el = $(element);\n          if (el.is(\":checked\")) {\n            el.siblings('.is_pioneer_area').fadeIn()\n            el.closest('div').find('.invilabel').animate({'line-height': '25px'});\n          } else {\n            el.siblings('.is_pioneer_area').fadeOut().find('input').prop('checked', false);\n            el.closest('div').find('.invilabel').animate({'line-height': '35px'});\n          }\n        }\n\n        function reset_attendants(element) {\n          var el = $(element)\n          Codelearn.attendants[el.data('course')] = {}\n          if (el.is(\":checked\")) {\n            $(\"#attendant_form .student_name:visible\").each(function() {\n              Codelearn.attendants[el.data('course')][$(this).data('index')] = true\n            })\n          }\n        }\n\n        function display_attendants(element) {\n          var el = $(element)\n\n          if (el.is(\":checked\") && students_amount() > 1) {\n            el.siblings('.attendants').html(students_names(el))\n\n          } else {\n            el.siblings('.attendants').html('')\n          }\n        }\n\n        function students_names(course) {\n          var names = \"\"\n          $(\"#attendant_form .student_name:visible\").each(function() {\n            if (Codelearn.attendants[course.data('course')][$(this).data('index')]) {\n              var current_name = $(this).val()\n              if (current_name == '')\n                current_name = $(this).data(\"default-name\")\n              if (names != \"\")\n                names += ', '\n              names += current_name\n            }\n          })\n          return names;\n        }\n\n        function open_attendants_editor(element) {\n          $('.attendants_editor').fadeOut();\n          var el = $(element)\n          var course = $(el.siblings('.course'))\n          var editor_content = \"Choose the child who is attending this course<br\/>\"\n          $(\"#attendant_form .student_name:visible\").each(function() {\n            var current_name = $(this).val()\n            if (current_name == '')\n              current_name = \"Sibling \" + $(this).data(\"index\")\n            editor_content += \"<input type='checkbox' data-index='\" + $(this).data(\"index\") + \"' class='disable_attendant' \" + ((Codelearn.attendants[course.data('course')][$(this).data(\"index\")]) ? 'checked=checked' : '') + \"'\/>\" + current_name + \"<br\/>\"\n          })\n          editor_content += '<input type=\"button\" class=\"btn-submit close_attendants_editor\" value=\"D\\'acord\">'\n\n          el.siblings('.attendants_editor').fadeIn().css(\"display\", \"inline\").html(editor_content);\n        }\n\n        function close_attendants_editor(element) {\n          var course = $(element.closest('.attendants_editor')).siblings('.course')\n          Codelearn.attendants[course.data('course')] = {}\n          $(element).siblings('.disable_attendant').each(function() {\n                if($(course).is(\":checked\")){\n                    Codelearn.attendants[course.data('course')][$(this).data('index')] = $(this).is(\":checked\")\n                }\n          })\n          $(element).closest(\".attendants_editor\").fadeOut()\n          display_attendants(course)\n        }\n\n        function validate_attendant_form(form) {\n          var valid = true\n          $(\"#attendant_form .inputtext:visible\").each(function() {\n            if ($(this).val().trim() === '') {\n              valid = false\n              $(this).css('borderColor', 'red');\n            } else {\n              $(this).css('borderColor', '#ccc');\n            }\n          })\n\n          if (courses_amount() === 0) {\n            valid = false\n            $('#at_least_one').show()\n          } else {\n            $('#at_least_one').hide()\n          }\n\n          if (!$('#legal').is(\":checked\")) {\n            valid = false\n            $(\"#legal\").closest('div').css('backgroundColor', 'yellow');\n          } else {\n            $(\"#legal\").closest('div').css('backgroundColor', '');\n          }\n          return valid;\n        }\n\n        function submit_attendant_form(form) {\n          if ($(form).data('submitted')) {\n            return;\n          }\n          $(form).data('submitted', true)\n          var messages = $(form).closest('.contact-form').find('.submit_message');\n          $('#attendants').val(JSON.stringify(Codelearn.attendants));\n          $('#complements').val(JSON.stringify(Codelearn.complements));\n          $('#gift_cards').val(JSON.stringify(Codelearn.giftCards));\n          $('#coupon').val(JSON.stringify(Codelearn.coupon));\n\n          function set_recaptcha_error(code, detail) {\n            var context = {\n              code: code,\n              detail: detail || '',\n              user_agent: navigator.userAgent || '',\n              platform: navigator.platform || '',\n              language: navigator.language || ''\n            };\n            $('#recaptcha_error').val(code);\n            $('#recaptcha_error_context').val(JSON.stringify(context));\n          }\n\n          function clear_recaptcha_error() {\n            $('#recaptcha_error').val('');\n            $('#recaptcha_error_context').val('');\n          }\n\n          function post_form() {\n\t     if (window.CodelearnAttribution && typeof window.CodelearnAttribution.syncForm === 'function') {\n              window.CodelearnAttribution.syncForm(form);\n            }\n\n            $.post('\/\/codelearn.cat\/wp-content\/plugins\/codelearn\/codelearn_attendant.php', $(form).serialize(), function(data) {\n\n              if(data && data.redirect){\n                  window.location.replace(data.redirect);\n              }\n              else{\n                  messages.html('<h2>Your registration has been sent. We will contact you as soon as possible.<\/h2>').addClass('success_submited_form').show();\n                  $(form).hide();\n                  travel_to_form_top()\n                  gtag('event', 'purchase', {});\n                  if (typeof fbq === 'function') {\n                    fbq('track', 'Purchase');\n                  }\n              }\n\n            })\n                    .fail(function() {\n              messages.html('<h2>Some error has occurred. Please try again.<\/h2>').addClass('error_submiting_form').show();\n              $(form).data('submitted', false)\n            })\n          }\n\n          if (typeof grecaptcha === 'undefined') {\n            set_recaptcha_error('grecaptcha_undefined');\n            post_form();\n            return;\n          }\n\n          grecaptcha.ready(function() {\n            grecaptcha.execute('6LdB4F8sAAAAAGdh5ApcFDnYmspMr6wbWhm4OjzJ', {action: 'attendant_form'}).then(function(token) {\n              $('#recaptcha_token_attendant').val(token);\n              clear_recaptcha_error();\n              post_form();\n            }).catch(function() {\n              set_recaptcha_error('grecaptcha_execute_failed');\n              post_form();\n            });\n          });\n        }\n\n        function travel_to_form_top(){\n          $('html, body').animate({\n            scrollTop: $(\"a[name=formulari]\").offset().top\n          }, 1500);\n        }\n\n\n        $(\".course\").change(function() {\n          reset_attendants(this);\n          display_attendants(this)\n          calculate_price()\n        })\n\n        $(\"select[name='payment_type']\").change(function(){\n            if($(this).val() == 'card'){\n             $('#send_form').val('Pay now');\n            }\n            else{\n             $('#send_form').val('Send');\n            }\n        });\n\n        $(\"#students_amount\").change(function() {\n          show_student_fields()\n          $(\".course:checked\").each(function() {\n            display_attendants(this)\n          })\n          calculate_price()\n        })\n\n        $(\".is_student\").change(function() {\n                              calculate_price()\n        })\n\n        $(\".is_pioneer\").change(function() {\n          calculate_price()\n        })\n\n        $(\"#summary_complements, #summary_custom_complements\").on('change', 'select', function() {\n          calculate_price(true)\n        })\n\n        $('.attendants').click(function(ev) {\n          open_attendants_editor(this);\n          ev.preventDefault()\n        })\n\n        $(document).on('click', '.close_attendants_editor', function(ev) {\n          ev.preventDefault()\n          close_attendants_editor(this);\n          calculate_price()\n        })\n\n        $(document).on('click','.gift-card-remove-btn', function(e){\n            let key = $(this).parent().find('.gift-card-key').text();\n            Codelearn.giftCards = Codelearn.giftCards.filter(item => item.key !== key)\n            $(this).parent().remove();\n            calculate_price(true, true);\n        });\n\n        $('.gift-card-ok-btn').click(function(e){\n          let key = $(this).parent().find('.gift-card-key-input').val();\n          let pin = $(this).parent().find('.gift-card-pin-input').val();\n          if (key == '' || pin == '') return;\n\n          $.post('https:\/\/fun.codelearn.cat\/api\/gift_cards\/get_balance', {\n            key: key,\n            pin: pin,\n            currency: Codelearn.currency\n          }).done((data)=>{\n\n            if(Codelearn.giftCards.filter(item => item.key === key).length === 0){ \/\/ unless already used\n                Codelearn.giftCards.push({key:key, current_balance:data.current_balance, pin: pin, pretty_currency: data.pretty_currency});\n\n                let s = `\n                <li class=\"gift-card\" data-key=\"${key}\" style=\"margin-left: 10px; clear: both; display: list-item;\">\n                      <label>Key:<\/label>\n                      <span type=\"text\" class=\"gift-card-key\" style=\"width:100px;\">${key}<\/span>\n                      <label>PIN:<\/label><span type=\"text\" class=\"gift-card-pin\" style=\"width:50px;\">${pin}<\/span>\n                      <button class=\"gift-card-remove-btn\" type=\"button\">Remove<\/button>\n                      <span style=\"float:right\">\n                        <span class=\"gift-card-balance\">${data.pretty_current_balance}<\/span>\n                        <span class=\"gift-card-amount\"> <\/span>\n                      <\/span>\n                <\/li>\n                `;\n\n                $(\"#summary-gift-cards\").append(s);\n            }\n\n            calculate_price(true, true);\n\n            $(this).parent().find('.gift-card-key-input').val(\"\");\n            $(this).parent().find('.gift-card-pin-input').val(\"\");\n            $('#gift-card-errors').text(\"\");\n\n          }).error(function(jqXHR, textStatus, errorThrown){\n            if(jqXHR.status == 404){ $('#gift-card-errors').text(`No card was found with these data.`);}\n            else if(jqXHR.status == 423){ $('#gift-card-errors').text(`This card has been blocked because the wrong PIN code has been used several times.`); }\n            else if(jqXHR.status == 410){ $('#gift-card-errors').text(`This card has expired.`); }\n            else if(jqXHR.status == 406){jQuery('#gift-card-errors').text(`This gift card cannot be used with this currency.`);}\n            else if(jqXHR.status == 409){jQuery('#gift-card-errors').text(`This gift card is specific for monthly subscriptions.`);}\n            else{ $('#gift-card-errors').text(`An error occurred`); }\n          });\n\n        });\n\n        $(document).on('click','.coupon-remove-btn', function(e){\n            $(\".coupon\").remove();\n            Codelearn.coupon = {};\n            calculate_price(false, true);\n            $('.coupon-inputs').show();\n        });\n\n        $('.coupon-ok-btn').click(function(e){\n\n            let key = $(this).parent().find('.coupon-key-input').val();\n            if (key == '') return;\n\n            $.post('https:\/\/fun.codelearn.cat\/api\/coupons\/get_coupon', {\n                key: key,\n                scope_id: \"28\"\n              }).done((data)=>{\n                Codelearn.coupon = {key:key, amount:data.amount};\n\n                $(\".coupon\").remove();\n                let s = `\n                <li class=\"coupon\" data-key=\"${key}\" style=\"margin-left: 10px; clear: both; display: list-item;\">\n                    <label>${key}<\/label><span type=\"text\" class=\"gift-card-key\" style=\"width:100px;\">${data.amount}<\/span>\n                    <button class=\"coupon-remove-btn\" type=\"button\">Remove<\/button>\n                <\/li>`;\n\n                $(\"#summary-coupons\").append(s);\n\n                calculate_price(false, true);\n\n                $('.coupon-inputs').hide();\n                $(this).parent().find('.coupon-key-input').val(\"\");\n                $('#coupon-errors').text(\"\");\n\n              }).error(function(jqXHR, textStatus, errorThrown){\n                if(jqXHR.status == 404){ $('#coupon-errors').text(`Coupon not found.`);}\n                else if(jqXHR.status == 423){ $('#coupon-errors').text(`This coupon is not available.`); }\n                else if(jqXHR.status == 410){ $('#coupon-errors').text(`This coupon expired.`); }\n                else if(jqXHR.status == 406){ $('#coupon-errors').text(`This coupon is not available.`); }\n                else{ $('#coupon-errors').text(`An error occurred`); }\n              });\n        });\n\n        $('#attendant_form').submit(function(ev) {\n          ev.preventDefault()\n          if (validate_attendant_form(this)) {\n            mixpanel.track('attendant_form_submitted', {\n               payment_type: ($('#send_form').val() == 'Pay now' ? \"card\" : \"transfer\")\n            });\n            submit_attendant_form(this)\n          }\n        })\n\n        document.addEventListener('click', function(ev) {\n          var node = ev.target;\n          while (node && node !== document && !(node.classList && node.classList.contains('signup_link'))) {\n            node = node.parentNode;\n          }\n          if (!node || node === document) return;\n\n          \/\/ Capture phase to bypass Divi smooth-scroll handlers.\n          ev.preventDefault();\n          ev.stopPropagation();\n          ev.stopImmediatePropagation();\n\n          var courseId = node.getAttribute('data-course');\n          if (courseId) {\n            var checkbox = $(\".course[data-course='\" + courseId + \"']\").not(':disabled').first();\n            if (checkbox.length && !checkbox.prop('disabled')) {\n              checkbox.prop('checked', true).trigger('change');\n            }\n          }\n          travel_to_form_top();\n        }, true);\n\n\n      })(jQuery);\n    <\/script>\n    <!-- start Mixpanel --><script type=\"text\/javascript\">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+\"=([^&]*)\")))?m[1]:null};f&&d(f,\"state\")&&(j=JSON.parse(decodeURIComponent(d(f,\"state\"))),\"mpeditor\"===j.action&&(b.sessionStorage.setItem(\"_mpcehash\",f),history.replaceState(j.desiredHash||\"\",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(\".\");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,\n    0)))}}var e=a;\"undefined\"!==typeof g?e=a[g]=[]:g=\"mixpanel\";e.people=e.people||[];e.toString=function(b){var a=\"mixpanel\";\"mixpanel\"!==g&&(a+=\".\"+g);b||(a+=\" (stub)\");return a};e.people.toString=function(){return e.toString(1)+\".people (stub)\"};l=\"disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove\".split(\" \");\n    for(h=0;h<l.length;h++)c(e,l[h]);var f=\"set set_once union unset remove delete\".split(\" \");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=[\"get_group\"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement(\"script\");b.type=\"text\/javascript\";b.async=!0;b.src=\"undefined\"!==typeof MIXPANEL_CUSTOM_LIB_URL?\n    MIXPANEL_CUSTOM_LIB_URL:\"file:\"===c.location.protocol&&\"\/\/cdn4.mxpnl.com\/libs\/mixpanel-2-latest.min.js\".match(\/^\\\/\\\/\/)?\"https:\/\/cdn4.mxpnl.com\/libs\/mixpanel-2-latest.min.js\":\"\/\/cdn4.mxpnl.com\/libs\/mixpanel-2-latest.min.js\";d=c.getElementsByTagName(\"script\")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);\n    mixpanel.init(\"6fea31c2cac8da2be9fb0b6135e91216\");<\/script><!-- end Mixpanel -->\n<style>\n  .course-occurrences-grid {\n    display: grid;\n    gap: 12px;\n    margin-top: 10px;\n  }\n  .course-occurrences-grid .convocatoria-card {\n    background: #ffffff;\n    border-left: 6px solid #6E378C;\n    border-radius: 12px;\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\n    padding: 14px 16px;\n  }\n  .course-occurrences-grid .convocatoria-date {\n    margin: 0 0 8px 0;\n    font-weight: 700;\n    font-size: 1.1em;\n  }\n  .course-occurrences-grid .convocatoria-meta {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .course-occurrences-grid .convocatoria-meta li {\n    margin: 0 0 6px 0;\n  }\n  .course-occurrences-grid .convocatoria-notes {\n    margin-top: 8px;\n  }\n  .course-occurrences-grid .btn-inscriure {\n    margin-top: 12px;\n    display: inline-block;\n    position: relative;\n    background: #5fd300 !important;\n    color: #fff !important;\n    border: 0 !important;\n    font-weight: 700;\n    padding: 12px 40px 12px 28px;\n    border-radius: 8px;\n    text-shadow: none;\n    overflow: hidden;\n    transition: all 0.3s ease;\n  }\n  .course-occurrences-grid .btn-inscriure:after {\n    content: \">\";\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 12px !important;\n    margin-left: 0 !important;\n    opacity: 1 !important;\n    transition: right 0.2s ease !important;\n  }\n  .course-occurrences-grid .btn-inscriure:hover {\n    background: #9dc12c !important;\n    color: #fff !important;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);\n  }\n  .course-occurrences-grid .btn-inscriure:hover:after {\n    right: 8px !important;\n  }\n  @media (max-width: 480px) {\n    .course-occurrences-grid .btn-inscriure {\n      display: block;\n      width: 100%;\n      text-align: center;\n      padding: 11px 32px 11px 20px;\n    }\n  }\n<\/style>\n\n\n\n    <a name=\"campus_16\" hidefocus=\"true\" style=\"outline: none;\"><\/a>\n    <div class=\"sb sb_yellow course_wrapper\">\n\t\t<div class=\"box_title course_name\">\n\t       3D Video Games with Unity (Level 1)\t\t<\/div>\n\t\t<div class=\"box_content\">\n    <img loading=\"lazy\" class=\"frame_center\" width=\"606\" height=\"316\" src=\"https:\/\/fun.codelearn.cat\/\/media\/asset_publics\/resources\/000\/011\/388\/original\/logo-unity-games.png\" \/>\n    <p>Unity is the most important gaming development platform today. A great starting point for youngsters who want to start creating their own video games.<br \/>\r\n<br \/>\r\nIn this course you will learn things like:<br \/>\r\n<br \/>\r\n- Understanding the Unity interface<br \/>\r\n- How to create a new project<br \/>\r\n- Visual Scripting (and some C \/ C # if there is time)<br \/>\r\n- Terrain, environments and 3D and 2D models<br \/>\r\n- How Physics Works<br \/>\r\n- Apply effects of lights, shadows and materials<br \/>\r\n- Image management with GIMP<br \/>\r\n- Audacity audio management<br \/>\r\n<br \/>\r\n<br \/>\r\nREQUIREMENTS:<br \/>\r\n<br \/>\r\nMinimum age: 12 years<br \/>\r\n<br \/>\r\nAs we are going to use the Unity software, there are some minimum requirements for your computer:<br \/>\r\n<br \/>\r\n- 15 GB of free disk space.<br \/>\r\n- 4 GB of RAM.<br \/>\r\n- Windows 7 or higher or MacOS X 10.8 or higher.<br \/>\r\n- Graphics card with DX9 or DX11.<br \/>\r\n<br \/>\r\nRecommended requirements:<br \/>\r\n<br \/>\r\n- 15 GB of free disk space.<br \/>\r\n- 8 GB of RAM.<br \/>\r\n- Windows 7 or higher or MacOSX 10.8 or higher.<br \/>\r\n- Graphics card with DX9 or DX11.<br \/>\r\n- INTEL GRAPHIC 4000 graphics card (or higher), or Nvidia or ATI with a dedicated 1G VRAM.<\/p>\n\n\n    <strong>When and where?<\/strong>\n    <div class=\"course-occurrences-grid\">\n    \n      <div class=\"course_occurrence_wrapper convocatoria-card\" data-age-max=\"\" data-age-min=\"12\" data-format=\"online\">\n      <div style=\"padding: 0px 10px; background-color: #5fd300; display: inline-block; border-radius: 20px; color: white; font-weight: bold; font-size: 0.7em; margin-bottom: 10px;\">\n                  ONLINE              <\/div>\n      <p class=\"convocatoria-date\">6th, 7th, 8th, 9th and 10th of July<\/p>\n      <ul class=\"convocatoria-meta\">\n        <li><strong>\ud83d\udd52 Time:<\/strong> 9:30 - 13:00<\/li>\n        <li><strong>\ud83d\udccd Place:<\/strong>\n                   Online                <\/li>\n                  <li><strong>\ud83c\udf10 Language:<\/strong> English<\/li>\n                <li><strong>\ud83c\udff7\ufe0f Cost:<\/strong> <span style='margin-right: 7px; margin-left:3px'>140\u20ac<\/span><\/li>\n                  <li><strong>\ud83d\udc64 Age:<\/strong> From 12 years old<\/li>\n              <\/ul>\n                        <a href=\"#formulari\" class=\"btn_yellow signup_link btn-inscriure\" data-course=\"5433\">Sign up now<\/a>\n          <\/div>\n        <\/div>\n    The requirements in order to join this ONLINE campus are specified below:<br \/>\r\n<br \/>\r\n- Minimum Age: 12 years or more<br \/>\r\n<br \/>\r\n- Computers that won't do the job:<br \/>\r\n<br \/>\r\nChromebooks NO<br \/>\r\n<br \/>\r\n- Minimum PC Requirements<br \/>\r\n<br \/>\r\nOperating System: Minimum Windows 7, MacOS Sierra 10.12.6, Ubuntu 4.18<br \/>\r\nIntel i5<br \/>\r\nMinimum 4 Gb of RAM Memory<br \/>\r\n15 Gb of free hard disk<br \/>\r\nGraphics card with OpenGL, DirectX 11 or higher \t<div class=\"clear\"><\/div><\/div><\/div>\n    &nbsp;\n\n    \n\n    <a name=\"campus_75\" hidefocus=\"true\" style=\"outline: none;\"><\/a>\n    <div class=\"sb sb_yellow course_wrapper\">\n\t\t<div class=\"box_title course_name\">\n\t       ChatGPT and other AI tools\t\t<\/div>\n\t\t<div class=\"box_content\">\n    <img loading=\"lazy\" class=\"frame_center\" width=\"606\" height=\"316\" src=\"https:\/\/fun.codelearn.cat\/\/media\/asset_publics\/resources\/000\/075\/813\/original\/ca_Google-Gemini-02-14-2026_12_28_PM.png\" \/>\n    <p>Have you heard of chatGPT, Dall-E, Gemini, or other AI tools?<br \/>\r\nChatGPT is a natural language model created by openAI that uses artificial intelligence to generate coherent responses to questions and conversations.<br \/>\r\n<br \/>\r\nIn this course, you'll discover how you can use this tool to improve your daily life. You'll learn to use ChatGPT for schoolwork, programming, and digital content creation, as well as how to detect and correct common errors generated by these language models.<br \/>\r\n<br \/>\r\nThrough this course, students will learn to:<br \/>\r\n<br \/>\r\n- Use AI tools such as ChatGPT, Midjourney, Claude, etc.<br \/>\r\n<br \/>\r\n- Maximize efficiency when using these tools<br \/>\r\n- Detect errors in the results of these tools (incoherent responses, insufficient responses, etc.)<br \/>\r\n- Use these tools for programming<\/p>\n\n\n    <strong>When and where?<\/strong>\n    <div class=\"course-occurrences-grid\">\n    \n      <div class=\"course_occurrence_wrapper convocatoria-card\" data-age-max=\"\" data-age-min=\"12\" data-format=\"online\">\n      <div style=\"padding: 0px 10px; background-color: #5fd300; display: inline-block; border-radius: 20px; color: white; font-weight: bold; font-size: 0.7em; margin-bottom: 10px;\">\n                  ONLINE              <\/div>\n      <p class=\"convocatoria-date\">20th, 21st, 22nd, 23rd and 24th of July<\/p>\n      <ul class=\"convocatoria-meta\">\n        <li><strong>\ud83d\udd52 Time:<\/strong> 9:30 - 13:00 CET<\/li>\n        <li><strong>\ud83d\udccd Place:<\/strong>\n                   Online                <\/li>\n                  <li><strong>\ud83c\udf10 Language:<\/strong> English<\/li>\n                <li><strong>\ud83c\udff7\ufe0f Cost:<\/strong> <span style='margin-right: 7px; margin-left:3px'>140\u20ac<\/span><\/li>\n                  <li><strong>\ud83d\udc64 Age:<\/strong> From 12 years old<\/li>\n              <\/ul>\n                        <a href=\"#formulari\" class=\"btn_yellow signup_link btn-inscriure\" data-course=\"5437\">Sign up now<\/a>\n          <\/div>\n        <\/div>\n     \t<div class=\"clear\"><\/div><\/div><\/div>\n    &nbsp;\n\n    \n\n    <a name=\"campus_10\" hidefocus=\"true\" style=\"outline: none;\"><\/a>\n    <div class=\"sb sb_yellow course_wrapper\">\n\t\t<div class=\"box_title course_name\">\n\t       Introduction to Programming with the Codelearn Method\t\t<\/div>\n\t\t<div class=\"box_content\">\n    <img loading=\"lazy\" class=\"frame_center\" width=\"606\" height=\"316\" src=\"https:\/\/fun.codelearn.cat\/\/media\/asset_publics\/resources\/000\/007\/654\/original\/bons-vs-dolents-navas-2-1200x520.jpg\" \/>\n    <p>On this intensive course, students will begin to work with our innovative method and learn to program in a fun way that stimulates their intelligence and creativity.<br \/>\r\n<br \/>\r\nThe activities will help students starting to develop computational thinking, which is a problem solving technique using computer mechanisms.<br \/>\r\n<br \/>\r\nSpecifically, students will learn to:<br \/>\r\n<br \/>\r\n- Solve small programming problems with the introductory languages Logo and Karel.<br \/>\r\n- To know some of the robots that we use in the method<br \/>\r\n- Understand what the binary language is and start converting between decimal and binary numbers.<br \/>\r\n- Perform activities that allow them to work wit, reasoning and creativity.<br \/>\r\n<br \/>\r\nThis coding camp is a great way to have a first contact with Codelearn and learn more about programming and robotics!<\/p>\n\n\n    <strong>When and where?<\/strong>\n    <div class=\"course-occurrences-grid\">\n    \n      <div class=\"course_occurrence_wrapper convocatoria-card\" data-age-max=\"\" data-age-min=\"12\" data-format=\"online\">\n      <div style=\"padding: 0px 10px; background-color: #5fd300; display: inline-block; border-radius: 20px; color: white; font-weight: bold; font-size: 0.7em; margin-bottom: 10px;\">\n                  ONLINE              <\/div>\n      <p class=\"convocatoria-date\">27th, 28th, 29th, 30th and 31st of July<\/p>\n      <ul class=\"convocatoria-meta\">\n        <li><strong>\ud83d\udd52 Time:<\/strong> 9:30 - 13:00 CET<\/li>\n        <li><strong>\ud83d\udccd Place:<\/strong>\n                   Online                <\/li>\n                  <li><strong>\ud83c\udf10 Language:<\/strong> English<\/li>\n                <li><strong>\ud83c\udff7\ufe0f Cost:<\/strong> <span style='margin-right: 7px; margin-left:3px'>140\u20ac<\/span><\/li>\n                  <li><strong>\ud83d\udc64 Age:<\/strong> From 12 years old<\/li>\n              <\/ul>\n                        <a href=\"#formulari\" class=\"btn_yellow signup_link btn-inscriure\" data-course=\"5442\">Sign up now<\/a>\n          <\/div>\n        <\/div>\n     \t<div class=\"clear\"><\/div><\/div><\/div>\n    &nbsp;\n\n    [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; custom_padding_last_edited=&#8221;on|desktop&#8221; next_background_color=&#8221;#ffffff&#8221; admin_label=&#8221;Header&#8221; _builder_version=&#8221;4.6.4&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_start=&#8221;#89ea3a&#8221; background_color_gradient_end=&#8221;#032d00&#8243; background_color_gradient_direction=&#8221;130deg&#8221; background_enable_image=&#8221;off&#8221; parallax=&#8221;on&#8221; min_height=&#8221;385px&#8221; custom_padding=&#8221;5vw||1vw||false|false&#8221; custom_padding_tablet=&#8221;100px||100px||true&#8221; custom_padding_phone=&#8221;||||true&#8221; bottom_divider_style=&#8221;ramp2&#8243; bottom_divider_height=&#8221;250px&#8221; bottom_divider_flip=&#8221;horizontal&#8221; bottom_divider_height_tablet=&#8221;150px&#8221; bottom_divider_height_phone=&#8221;110px&#8221; bottom_divider_height_last_edited=&#8221;on|phone&#8221; saved_tabs=&#8221;all&#8221;][et_pb_row column_structure=&#8221;2_3,1_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|0px||||&#8221;][et_pb_column type=&#8221;2_3&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.6.4&#8243; text_font=&#8221;Roboto||||||||&#8221; header_font=&#8221;Roboto|700|||||||&#8221; header_text_align=&#8221;center&#8221; header_font_size=&#8221;80px&#8221; header_line_height=&#8221;1.2em&#8221; header_3_font=&#8221;Roboto|700||on|||||&#8221; header_3_text_align=&#8221;center&#8221; header_3_text_color=&#8221;#ffffff&#8221; header_3_font_size=&#8221;24px&#8221; header_3_letter_spacing=&#8221;10px&#8221; header_3_line_height=&#8221;2em&#8221; text_orientation=&#8221;center&#8221; background_layout=&#8221;dark&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;|20px|25px|||&#8221; animation_style=&#8221;slide&#8221; animation_direction=&#8221;left&#8221; text_font_size_last_edited=&#8221;off|desktop&#8221; header_font_size_tablet=&#8221;40px&#8221; header_font_size_phone=&#8221;32px&#8221; header_font_size_last_edited=&#8221;on|phone&#8221; header_3_font_size_tablet=&#8221;16px&#8221; header_3_font_size_phone=&#8221;14px&#8221; header_3_font_size_last_edited=&#8221;on|phone&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":""},"_links":{"self":[{"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/pages\/7344"}],"collection":[{"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/comments?post=7344"}],"version-history":[{"count":7,"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/pages\/7344\/revisions"}],"predecessor-version":[{"id":7788,"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/pages\/7344\/revisions\/7788"}],"wp:attachment":[{"href":"https:\/\/codelearn.com\/wp-json\/wp\/v2\/media?parent=7344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}