Video Page<\/title>\n <style>\n body {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n text-align: center;\n }\n .videoWrapper {\n position: relative;\n padding-bottom: 60%; \/* 16:9 aspect ratio *\/\n width: 90%; \/* Adjust the width as needed *\/\n margin-top: 20px;\n margin-bottom: 20px; \/* Space between video and button *\/\n }\n .videoWrapper video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n #nextButton {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: not-allowed;\n opacity: 0.5;\n margin-top: 10px; \/* Added top margin *\/\n }\n #progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 66%; \/* Represents the progress (6\/9 = 66%) *\/\n }\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n\n <\/style>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <script>\n $(document).ready(function() {\n$('#videoContainer').on('ended', function() {\n $('#nextButton').prop('disabled', false).css('cursor', 'pointer').css('opacity', '1');\n });\n\n $('#nextButton').prop('disabled', true);\n\/\/ Function to update the progress bar\n function updateProgress(currentPage, totalPages) {\n var progressPercentage = (currentPage \/ totalPages) * 100;\n document.getElementById('progressBar').style.width = progressPercentage + '%';\n document.getElementById('progressText').textContent = 'Page ' + currentPage + ' out of ' + totalPages;\n }\n\n \/\/ Example: Update to page 6 of 9\n updateProgress(6, 9);\n \nvar groupID = localStorage.getItem('groupID');\nconsole.log(groupID);\n\n\n $('#nextButton').click(function() {\n if (parseInt(groupID) === 1 || parseInt(groupID) === 2) {\n window.location.href = \"https:\/\/www.beams-experiments.com\/index.php\/ideation-with-gpt-4-paper-2\/\";\n } else if (parseInt(groupID) === 3) {\n window.location.href = \"https:\/\/www.beams-experiments.com\/index.php\/task-instructions\/\";\n } \n });\n\n alert('Watch this instructional video on how to use GPT-4. The Next button will be enabled once you finish watching. Your Group ID: ' + groupID);\n });\n <\/script>\n<\/head>\n<body>\n<div class=\"videoWrapper\">\n <video id=\"videoContainer\" controls>\n <source src=\"https:\/\/www.beams-experiments.com\/howToUseGPT4.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n<\/div>\n\n \n <button id=\"nextButton\">Next<\/button>\n\n <div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n <\/div>\n <div id=\"progressText\">Page X out of Y<\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Video Page Your browser does not support the video tag. Next Page X out of Y<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":85,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":6412,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/6412"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":29,"date":"2023-12-06T15:00:52","date_gmt":"2023-12-06T15:00:52","guid":{"rendered":"https:\/\/beams-experiments.com\/?page_id=29"},"modified":"2026-02-28T09:49:23","modified_gmt":"2026-02-28T09:49:23","slug":"gpt-4-instructions","status":"publish","type":"page","link":"https:\/\/beams-experiments.com\/index.php\/gpt-4-instructions\/","title":{"rendered":"GPT-4 Instructions"},"content":{"rendered":"\n\n\n\n Video Page<\/title>\n <style>\n body {\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n text-align: center;\n }\n .videoWrapper {\n position: relative;\n padding-bottom: 60%; \/* 16:9 aspect ratio *\/\n width: 90%; \/* Adjust the width as needed *\/\n margin-top: 20px;\n margin-bottom: 20px; \/* Space between video and button *\/\n }\n .videoWrapper video {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n #nextButton {\n display: block;\n background-color: #007bff;\n color: white;\n padding: 10px 20px;\n font-size: 16px;\n border: none;\n border-radius: 5px;\n cursor: not-allowed;\n opacity: 0.5;\n margin-top: 10px; \/* Added top margin *\/\n }\n #progressBarContainer {\n width: 90%;\n background-color: #e0e0e0;\n border-radius: 5px;\n margin-top: 10px;\n }\n #progressBar {\n height: 10px;\n background-color: #007bff;\n border-radius: 5px;\n width: 66%; \/* Represents the progress (6\/9 = 66%) *\/\n }\n #progressText {\n text-align: center;\n margin-top: 5px;\n }\n\n <\/style>\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n <script>\n $(document).ready(function() {\n$('#videoContainer').on('ended', function() {\n $('#nextButton').prop('disabled', false).css('cursor', 'pointer').css('opacity', '1');\n });\n\n $('#nextButton').prop('disabled', true);\n\/\/ Function to update the progress bar\n function updateProgress(currentPage, totalPages) {\n var progressPercentage = (currentPage \/ totalPages) * 100;\n document.getElementById('progressBar').style.width = progressPercentage + '%';\n document.getElementById('progressText').textContent = 'Page ' + currentPage + ' out of ' + totalPages;\n }\n\n \/\/ Example: Update to page 6 of 9\n updateProgress(6, 9);\n \nvar groupID = localStorage.getItem('groupID');\nconsole.log(groupID);\n\n\n $('#nextButton').click(function() {\n if (parseInt(groupID) === 1 || parseInt(groupID) === 2) {\n window.location.href = \"https:\/\/www.beams-experiments.com\/index.php\/ideation-with-gpt-4-paper-2\/\";\n } else if (parseInt(groupID) === 3) {\n window.location.href = \"https:\/\/www.beams-experiments.com\/index.php\/task-instructions\/\";\n } \n });\n\n alert('Watch this instructional video on how to use GPT-4. The Next button will be enabled once you finish watching. Your Group ID: ' + groupID);\n });\n <\/script>\n<\/head>\n<body>\n<div class=\"videoWrapper\">\n <video id=\"videoContainer\" controls>\n <source src=\"https:\/\/www.beams-experiments.com\/howToUseGPT4.mp4\" type=\"video\/mp4\">\n Your browser does not support the video tag.\n <\/video>\n<\/div>\n\n \n <button id=\"nextButton\">Next<\/button>\n\n <div id=\"progressBarContainer\">\n <div id=\"progressBar\"><\/div>\n <\/div>\n <div id=\"progressText\">Page X out of Y<\/div>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Video Page Your browser does not support the video tag. Next Page X out of Y<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":85,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":6412,"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/pages\/29\/revisions\/6412"}],"wp:attachment":[{"href":"https:\/\/beams-experiments.com\/index.php\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}