SI20/spin-wheel/index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <!--css-->
        <link rel="stylesheet" type="text/css" href="style.css" />

        <title>Wheel of Fortune</title>
        
        <!--P5.MIN.JS-->
<script src="p5.min.js" ></script>
<script>
var allQuestions=[];
var questions = new XMLHttpRequest();
questions.open('GET', './list.txt');
questions.onreadystatechange = function() {
    allQuestions=questions.responseText.split("\n");
}
questions.send();

function preload(){
    img=loadImage('wheel2803.svg');
}
function setup() {
    var canvas = createCanvas(windowWidth/2, windowHeight/2);
    canvas.parent("wheel");
}

var spinning = 2000;
var currentSpinning = 0;
var spinonoff = false; 
function spin(){
    spinning = 1800 + random(0,500);
    currentSpinning = 0;
    spinonoff = true;
}

function card(){
  //  rect(0, 0, 55, 55);
    var popup=document.getElementById("popup");
    popup.style.display="block";
    var popuptext=document.getElementById("popuptext");
    popuptext.innerHTML=allQuestions[Math.floor(Math.random()*allQuestions.length)];
    console.log(popup);
    currentSpinning = 0;
    spinonoff=false;
}
function closepopup(){
    var popup=document.getElementById("popup");
    popup.style.display="none";
    console.log("closing");
}
function draw() {
    clear();
  // background(220);
  imageMode(CENTER);
  angleMode(DEGREES);
  translate (windowWidth/4, windowHeight/4);
  if (spinonoff==true){
    rotate(currentSpinning);

    currentSpinning = currentSpinning+10;
    console.log(spinning,currentSpinning);
    if (currentSpinning > spinning){
        currentSpinning = spinning;
         card();
    } 
  }
  image (img,0,0,250,250);
}
</script>
</head>

<body>
    <div class="bg-image"></div>
    <div class="bg-text-top">
        <h1>Wheel of Fortune</h1>
        <h2>Welcome, my dear!</h2>> 
            
            <p>This exercise is all about healing, about reconnecting with what is essential and authentic within yourself. By understanding the true nature of our suffering, we can evoke compassion for ourselves as we move through uncomfortable feelings on the path to healing and peace.
                
            <br>

            <br>I will be guiding you through a series of carefully selected questions written by different authors, some are well-known, and others will remain unknown. To begin the exercise, spin the Wheel of Fortune. After a few seconds, a question will appear on the screen. Then, take a photo slide from the deck and hold it to the screen. Think about that question by looking at it and the tiny film together like friends. 
            
            <br>
            
            <br>If you feel like writing your thoughts, you can use the tiny notepad made just for you. These photo slides are there to help you dive deeper into your inner world. Use them to explore moments in your life that you may not have fully processed or understood. As you reflect on these images and answer the questions, you may gain new insights and perspectives about yourself and your life.</p>        
        </div>

        <div id="wheel"></div>
        <div id="popup">
            <h3 id="popuptext"></h3>
            <img class="slide" src="photohere.svg">
            <button class="close" onclick="closepopup()" > Close</button>
        </div>
    
        <button class="spin-wheel" onclick="spin()" > Spin</button>

        <div class="bg-text-bottom">
            <h2>Here are a few things I prepared for you before you begin:</h2>
            <p>1. Have a strong intention to commit to this exercise for some time.
            <br>2. Find a quiet room free of distractions.
            <br>3. Get a notebook and pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.</p>
        </div>

        <div class="credits">
            <p>Photo by Guillermo Ferla on Unsplash</p>
        </div>
    

<img class="top-left-corner" src="/spin-wheel/svg/moon-stars.svg">
<img class="top-right-corner" src="/spin-wheel/svg/dream-catcher.svg">
<img class="bottom-left-corner" src="/spin-wheel/svg/crystalsleft.svg">
<img class="bottom-right-corner" src="/spin-wheel/svg/crystalsright.svg">


</body>
here comes the spin wheel 2 years ago			`<!DOCTYPE html>`
			`<head>`
html edit, style sheet, images 2 years ago			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`

			`<!--css-->`
			`<link rel="stylesheet" type="text/css" href="style.css" />`

			`<title>Wheel of Fortune</title>`

			`<!--P5.MIN.JS-->`
here comes the spin wheel 2 years ago			`<script src="p5.min.js" ></script>`
			`<script>`
popup, questions list, random picker 2 years ago			`var allQuestions=[];`
			`var questions = new XMLHttpRequest();`
			`questions.open('GET', './list.txt');`
			`questions.onreadystatechange = function() {`
			`allQuestions=questions.responseText.split("\n");`
			`}`
			`questions.send();`

here comes the spin wheel 2 years ago			`function preload(){`
edits 2 years ago			`img=loadImage('wheel2803.svg');`
here comes the spin wheel 2 years ago			`}`
			`function setup() {`
style changes and button 2 years ago			`var canvas = createCanvas(windowWidth/2, windowHeight/2);`
			`canvas.parent("wheel");`
here comes the spin wheel 2 years ago			`}`

popup, questions list, random picker 2 years ago			`var spinning = 2000;`
here comes the spin wheel 2 years ago			`var currentSpinning = 0;`
popup, questions list, random picker 2 years ago			`var spinonoff = false;`
here comes the spin wheel 2 years ago			`function spin(){`
			`spinning = 1800 + random(0,500);`
			`currentSpinning = 0;`
popup, questions list, random picker 2 years ago			`spinonoff = true;`
here comes the spin wheel 2 years ago			`}`

			`function card(){`
popup, questions list, random picker 2 years ago			`// rect(0, 0, 55, 55);`
			`var popup=document.getElementById("popup");`
			`popup.style.display="block";`
			`var popuptext=document.getElementById("popuptext");`
			`popuptext.innerHTML=allQuestions[Math.floor(Math.random()*allQuestions.length)];`
			`console.log(popup);`
			`currentSpinning = 0;`
			`spinonoff=false;`
			`}`
			`function closepopup(){`
			`var popup=document.getElementById("popup");`
			`popup.style.display="none";`
			`console.log("closing");`
here comes the spin wheel 2 years ago			`}`
			`function draw() {`
style changes and button 2 years ago			`clear();`
web edits 2 years ago			`// background(220);`
here comes the spin wheel 2 years ago			`imageMode(CENTER);`
			`angleMode(DEGREES);`
web edits 2 years ago			`translate (windowWidth/4, windowHeight/4);`
popup, questions list, random picker 2 years ago			`if (spinonoff==true){`
			`rotate(currentSpinning);`

			`currentSpinning = currentSpinning+10;`
			`console.log(spinning,currentSpinning);`
			`if (currentSpinning > spinning){`
			`currentSpinning = spinning;`
			`card();`
			`}`
here comes the spin wheel 2 years ago			`}`
popup, questions list, random picker 2 years ago			`image (img,0,0,250,250);`
here comes the spin wheel 2 years ago			`}`
			`</script>`
			`</head>`

			`<body>`
html edit, style sheet, images 2 years ago			`<div class="bg-image"></div>`
style changes and button 2 years ago			`<div class="bg-text-top">`
			`<h1>Wheel of Fortune</h1>`
			`<h2>Welcome, my dear!</h2>>`
html edit, style sheet, images 2 years ago
replacing svg and editing text 2 years ago			`<p>This exercise is all about healing, about reconnecting with what is essential and authentic within yourself. By understanding the true nature of our suffering, we can evoke compassion for ourselves as we move through uncomfortable feelings on the path to healing and peace.`
popup, questions list, random picker 2 years ago
			`<br>`
here comes the spin wheel 2 years ago
style changes 2 years ago			`<br>I will be guiding you through a series of carefully selected questions written by different authors, some are well-known, and others will remain unknown. To begin the exercise, spin the Wheel of Fortune. After a few seconds, a question will appear on the screen. Then, take a photo slide from the deck and hold it to the screen. Think about that question by looking at it and the tiny film together like friends.`

			`<br>`

			`<br>If you feel like writing your thoughts, you can use the tiny notepad made just for you. These photo slides are there to help you dive deeper into your inner world. Use them to explore moments in your life that you may not have fully processed or understood. As you reflect on these images and answer the questions, you may gain new insights and perspectives about yourself and your life.</p>`
html edit, style sheet, images 2 years ago			`</div>`
style changes and button 2 years ago
			`<div id="wheel"></div>`
popup, questions list, random picker 2 years ago			`<div id="popup">`
style edits 2 years ago			`<h3 id="popuptext"></h3>`
style edits 2 years ago			`<img class="slide" src="photohere.svg">`
popup, questions list, random picker 2 years ago			`<button class="close" onclick="closepopup()" > Close</button>`
			`</div>`

style changes 2 years ago			`<button class="spin-wheel" onclick="spin()" > Spin</button>`
style changes and button 2 years ago
			`<div class="bg-text-bottom">`
			`<h2>Here are a few things I prepared for you before you begin:</h2>`
replacing svg and editing text 2 years ago			`<p>1. Have a strong intention to commit to this exercise for some time.`
			`<br>2. Find a quiet room free of distractions.`
			`<br>3. Get a notebook and pen. Handwriting will engage your mind more actively and profoundly, help you connect with yourself, and enable the tracing of your progress over time.</p>`
			`</div>`

			`<div class="credits">`
			`<p>Photo by Guillermo Ferla on Unsplash</p>`
popup, questions list, random picker 2 years ago			`</div>`
style changes and button 2 years ago
web edits 2 years ago
svg 2 years ago			`<img class="top-left-corner" src="/spin-wheel/svg/moon-stars.svg">`
			`<img class="top-right-corner" src="/spin-wheel/svg/dream-catcher.svg">`
			`<img class="bottom-left-corner" src="/spin-wheel/svg/crystalsleft.svg">`
			`<img class="bottom-right-corner" src="/spin-wheel/svg/crystalsright.svg">`
style edits 2 years ago
web edits 2 years ago

here comes the spin wheel 2 years ago			`</body>`