SI20/web/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();

console.log("hey there");
function preload(){
    img=loadImage('wheel.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 you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our uncomfortable feelings on the path to healing and peace. 
                
            <br>

            <br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune. After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to think of an answer to that question by looking at it and the tiny film simultaneously.</p>        
        </div>
        
        <button class="spin-wheel" onclick="spin()" > Spin</button>

        <div id="wheel"></div>
        <div id="popup">
            <h1 id="popuptext"></h1>
            <button class="close" onclick="closepopup()" > Close</button>
        </div>
    

        <div class="bg-text-bottom">
            <h2>Here are a few things I prepared for you before you begin:</h2>
            <p>1. Have a strong sense of intention to commit to this exercise for some time.
            <br>2. Find a quiet room, free of distraction.
            <br>3. Get a notebook and a 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>
    

<img class="top-left-corner" src="crystals.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();`

			`console.log("hey there");`
here comes the spin wheel 2 years ago			`function preload(){`
popup, questions list, random picker 2 years ago			`img=loadImage('wheel.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
style changes and button 2 years ago			`<p>This exercise you are about to start revolves around healing, in a sense of reconnecting to what is essential and authentic about yourself. As we understand the true nature of our suffering, we can evoke compassion for ourselves as we move through our 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 and button 2 years ago			`<br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune. After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to think of an answer to that question by looking at it and the tiny film simultaneously.</p>`
html edit, style sheet, images 2 years ago			`</div>`
style changes and button 2 years ago
			`<button class="spin-wheel" onclick="spin()" > Spin</button>`

			`<div id="wheel"></div>`
popup, questions list, random picker 2 years ago			`<div id="popup">`
			`<h1 id="popuptext"></h1>`
			`<button class="close" onclick="closepopup()" > Close</button>`
			`</div>`

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>`
popup, questions list, random picker 2 years ago			`<p>1. Have a strong sense of intention to commit to this exercise for some time.`
			`<br>2. Find a quiet room, free of distraction.`
			`<br>3. Get a notebook and a 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>`
style changes and button 2 years ago
popup, questions list, random picker 2 years ago			`</div>`
style changes and button 2 years ago
web edits 2 years ago
			`<img class="top-left-corner" src="crystals.svg">`


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