{"id":8696,"date":"2024-07-31T12:38:46","date_gmt":"2024-07-31T12:38:46","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8696"},"modified":"2024-07-31T13:20:59","modified_gmt":"2024-07-31T13:20:59","slug":"virtual-spinner","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/virtual-spinner","title":{"rendered":"Spinner Classroom Tool"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Looking for an online spinner for the classroom? Consider using this FREE virtual spinner for teachers! Customize your spin with numbers or colors to plan various activities. Whether dividing the class into fair groups, selecting students randomly, or assigning learning stations (like the Sorting Hat from HP!), this virtual spinner tool makes classroom management fun. Ready to discover more creative ways to use this versatile digital spinner in class? Just spin and decide! Start now for free!<\/p>\n\n\n\n<style>\n        .spinner-tool-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 100%;\n            max-width: 800px;\n            padding: 20px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);\n            border-radius: 10px;\n            overflow: hidden;\n            background-color: #fff;\n            position: relative;\n        }\n        .spinner-tool-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n        .spinner-tool {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            margin: 0;\n            font-family: Arial, sans-serif;\n            box-sizing: border-box;\n        }\n        #spinner-container {\n            position: relative;\n            user-select: none;\n            width: 100%;\n            max-width: 400px;\n            height: 0;\n            padding-bottom: 100%;\n        }\n        #spinner {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            box-sizing: border-box;\n            user-select: none;\n        }\n        .controls {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n        .controls-row {\n            display: flex;\n            gap: 5px;\n        }\n        .controls button {\n            margin: 5px;\n            padding: 10px;\n            border: none;\n            cursor: pointer;\n            background-size: contain;\n            background-repeat: no-repeat;\n            user-select: none;\n        }\n        #color-button {\n            background-image: url('https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/color-1.svg');\n            width: 50px;\n            height: 50px;\n            background-color: transparent;\n        }\n        #number-button {\n            background-image: url('https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/number.svg');\n            width: 50px;\n            height: 50px;\n            background-color: transparent;\n        }\n        #choose-number-button {\n            width: 250px;\n            height: 50px;\n            cursor: pointer;\n            font-size: 1.5em;\n            font-weight: 700;\n            background-color: transparent;\n            border: 3px solid #000;\n            border-radius: 15px;\n            user-select: none;\n        }\n        #arrow-container {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 100%;\n            height: 100%;\n            transform: translate(-50%, -50%);\n            user-select: none;\n            pointer-events: none;\n        }\n        #arrow {\n            position: absolute;\n            width: 80%;\n            height: auto;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            user-select: none;\n            pointer-events: auto;\n            cursor: pointer;\n        }\n        #center-button {\n            position: absolute;\n            width: 5px;\n            height: 5px;\n            background-color: gray;\n            border: 8px solid black;\n            border-radius: 50%;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            user-select: none;\n        }\n        .popup {\n            display: none;\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background-color: transparent;\n            padding: 20px;\n            z-index: 1000;\n            max-width: 200px;\n        }\n        .popup button {\n            margin: 5px;\n            padding: 10px;\n            cursor: pointer;\n            user-select: none;\n        }\n        .popup-overlay {\n            display: none;\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.5);\n            z-index: 999;\n            user-select: none;\n        }\n        .btn-on-click {\n            font-size: 1em;\n            font-weight: 900;\n            border: 1px solid #000;\n            border-radius: 10px;\n            user-select: none;\n        }\n        @media (max-width: 600px) {\n            #choose-number-button {\n                width: 200px;\n                height: 40px;\n                font-size: 18px;\n            }\n            #color-button, #number-button {\n                width: 40px;\n                height: 40px;\n            }\n            .btn-on-click {\n                font-size: 12px;\n                height: 30px;\n            }\n            #arrow {\n                width: 74%;\n            }\n            #spinner {\n                max-width: 300px;\n            }\n            #center-button{\n                border: 5px solid #000;\n            }\n            #choose-number-button{\n                padding-top: 4px;\n            }\n            .popup button{\n                padding-top: 2px;\n            }\n        }\n    <\/style>\n\n    <div class=\"spinner-tool-container\">\n        <div class=\"spinner-tool\">\n            <div id=\"spinner-container\">\n                <canvas id=\"spinner\" width=\"400\" height=\"400\" draggable=\"false\"><\/canvas>\n                <div id=\"arrow-container\" draggable=\"false\">\n                    <img decoding=\"async\" id=\"arrow\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/arrow.png\" draggable=\"false\" onclick=\"spin(event)\">\n                    <div id=\"center-button\" draggable=\"false\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"controls\">\n                <div class=\"controls-row\">\n                    <button id=\"color-button\" onclick=\"setColorMode()\"><\/button>\n                    <button id=\"number-button\" onclick=\"setNumberMode()\"><\/button>\n                <\/div>\n                <button id=\"choose-number-button\" onclick=\"showNumberPopup()\">3 4 5 6<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"popup-overlay\" id=\"popup-overlay\"><\/div>\n        <div class=\"popup\" id=\"number-popup\">\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(3)\">3<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(4)\">4<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(5)\">5<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(6)\">6<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(7)\">7<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(8)\">8<\/button>\n            <button class=\"btn-on-click\" onclick=\"chooseNumber(9)\">9<\/button>\n            <button class=\"btn-on-click\" onclick=\"closeNumberPopup()\">Close<\/button>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Use this virtual spinner to create fair groups or choose students randomly!<\/p>\n","protected":false},"author":2,"featured_media":8698,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8696","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/spinner.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/comments?post=8696"}],"version-history":[{"count":4,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8696\/revisions"}],"predecessor-version":[{"id":8725,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8696\/revisions\/8725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8698"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}