Display hyperlink depending on spinner value

I stumbled upon this JavaScript spinner that displays a countdown feature, which I find quite interesting. The spinner counts down from 15 seconds. I'm curious if it's feasible to customize it so that if you land on a specific category like geography, it will count down 5 seconds and then redirect you to another website. Similarly, landing on history would lead you to a different link, and so on. Thanks for any help!

JavaScript

var colors = ["#ffff00" , "#1be11b", "#0000ff",  "#7e7e7e", "#8a2be2", "#006400", "#2980B9", "#E74C3C"];
// Preload necessary data
var prize_descriptions = ["GENERAL", "GEOGRAPHY", "HISTORY", "ARTS", "SCIENCE", "SPORTS", "RELIGION", "MEDIA"];
var current_user_status = {};

var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var current_user_status = null;
var spin_results = null;

var wheel;

var counter, tt;

function drawSpinnerWheel() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;

        wheel = canvas.getContext("2d");
        wheel.clearRect(0, 0, 500, 500);

        wheel.strokeStyle = "#ecf0f1";
        wheel.lineWidth = 5;

        wheel.font = '12px Helvetica, Arial';

        for (var i = 0; i < 8; i++) {
            var angle = startAngle + i * arc;
            wheel.fillStyle = colors[i];
            
            wheel.beginPath();
            wheel.arc(250, 250, outsideRadius, angle, angle + arc, false);
            wheel.arc(250, 250, insideRadius, angle + arc, angle, true);
            wheel.stroke();
            wheel.fill();

            wheel.save();
            wheel.shadowOffsetX = -1;
            wheel.shadowOffsetY = -1;
            wheel.shadowBlur = 0;
            wheel.shadowColor = "rgb(220,220,220)";
            wheel.fillStyle = "#ecf0f1";
            wheel.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
            wheel.rotate(angle + arc / 2 + Math.PI / 2);
            var text = prize_descriptions[i];
            if (text === undefined) text = "Not this time!";
            wheel.fillText(text, -wheel.measureText(text).width / 2, 0);
            wheel.restore();
        }

        //Arrow
        wheel.fillStyle = "#ecf0f1";
        wheel.beginPath();
        wheel.moveTo(250 - 4, 250 - (outsideRadius + 5));
        wheel.lineTo(250 + 4, 250 - (outsideRadius + 5));
        wheel.lineTo(250 + 4, 250 - (outsideRadius - 5));
        wheel.lineTo(250 + 9, 250 - (outsideRadius - 5));
        wheel.lineTo(250 + 0, 250 - (outsideRadius - 13));
        wheel.lineTo(250 - 9, 250 - (outsideRadius - 5));
        wheel.lineTo(250 - 4, 250 - (outsideRadius - 5));
        wheel.lineTo(250 - 4, 250 - (outsideRadius + 5));
        wheel.fill();
    }
}

function spin() {
    $("#spin").unbind('click');
    $("#spin").attr("id", "nospin");

    document.getElementById('timer').innerHTML = " ";
    document.getElementById('category').innerHTML = " ";

    spinMovement = Math.floor(Math.random() * 20) + prize_descriptions.length * 2;

    spinAngleStart = 1 * 10 + spinMovement;
    spinTime = 0;
    spinTimeTotal = Math.floor(Math.random() * 4) * Math.floor(Math.random() * 6) + Math.floor(Math.random() * 8) * Math.floor(Math.random() * 2000) + 2000;

    console.log(spinMovement + " - " + spinTimeTotal);

    rotateWheel();
}

function rotateWheel() {
    spinTime += 30;
    if (spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawSpinnerWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    wheel.save();
    wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
    var text = prize_descriptions[index];
    //wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
    wheel.restore();
    document.getElementById('timer').innerHTML = "15";
    document.getElementById('category').innerHTML = "Your Category is: " + text;

    counter = 15;
    tt=setInterval(function(){startTime()},1000);
}

function easeOut(t, b, c, d) {
    var ts = (t /= d) * t;
    var tc = ts * t;
    return b + c * (tc + -3 * ts + 3 * t);
}

drawSpinnerWheel();

function startTime() {
  if(counter == 0) {
    clearInterval(tt);

    $("#nospin").attr("id", "spin");
    $("#spin").bind('click', function(e) {
      e.preventDefault();
      spin();
    });

  } else {
    counter--;
  }
  document.getElementById('timer').innerHTML = counter;  
}

$("#spin").bind('click', function(e) {
    e.preventDefault();
    spin();
});

To witness the spinner in action, click here

javascript

Answer №1

It appears that all modifications should be concentrated within the functions stopRotateWheel() and startTime()

Upon calling the function, the variable text is assigned the output value ("Geography" or "Science", etc.).

Based on the value of text, different conditions can be applied to determine the countdown duration and the corresponding link when the countdown ends.

Consider the following example:

function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
wheel.save();
wheel.font = '30px "Homestead-Inline", Helvetica, Arial';
var text = prize_descriptions[index];
//wheel.fillText(text, 250 - wheel.measureText(text).width / 2, 250 + 10);
wheel.restore();
document.getElementById('timer').innerHTML = "15";
document.getElementById('category').innerHTML = "Your Category is: " + text;

/*implement an if-else statement*/
if(text=="Geography")
{
counter = 5;
tt=setInterval(function(){startTime("www.geography.com")},1000);
/*initiate countdown, and once the timer runs out... proceed to a different link*/
}
else if (text=="Science")
{
  //perform similar actions as above :)
}
}

note the line startTime("www.geography.com")? This is because we have also adjusted the function startTime to receive a parameter (in this case, the website) so that upon countdown completion the webpage redirects to that link :)

   function startTime(gotoLink) {
  if(counter == 0) {

    /*redirect to the specified link */
    window.location.replace(gotoLink)
  } else {
    counter--;
  }
  document.getElementById('timer').innerHTML = counter;  
  }

test it out!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transmit a continuous flow of integer values from an Android application and capture them on a Node.js express server

I'm looking to develop a simple solution to send a continuous stream of integers from an Android App to a Node.js server. I'm interested in understanding how to establish this stream in Android and how to receive it on my Node.js server using ex ...

javajavascriptandroidnode.jsexpress

Detaching the jQuery event where the context is tied to the handler

My current challenge involves removing a jQuery event with a callback function bound using this. The issue arises from the fact that .bind() generates a new function each time it is called, causing difficulties when trying to remove the event. I am strugg ...

javascriptjquery

Tips for creating a plug-in plugin and applying the necessary parameters

(function( $ ){ var functions = { init : function( options ) { var settings = $.extend({ //Declaring default settings that can be overridden in the plugin call code: 7, listHe ...

javascriptjqueryjquery-plugins

"Learn how to seamlessly submit a form and display the results without the need to refresh the

Here is the form and result div: <form action="result.php"> <input type="checkbox" name="number[]" value="11" /> <input type="checkbox" name="number[]" value="12" /> <input type="checkbox" name="number[]" value="13" /> <input t ...

javascriptphpajaxforms

Leverage Ajax to dynamically refresh content on a webpage by fetching data from a text file using PHP

I am facing an issue with updating data on my webpage using Ajax. The data is fetched through a PHP script and I need the refresh function to run every 5 seconds. However, it seems like this functionality is not working as expected. This is the JavaScript ...

javascriptphpajax

Resolving the issue of multiple instances of React within a single application

I'm currently working on a React module in my local environment. To link the module, I am using npm link. Although the module is being imported successfully, the hooks inside the module are failing with the following error message: Invalid hook call ...

javascriptreactjsnpmwebpackpackage.json

Customizing a Google chart legend to show on hover event

Utilizing the Google Chart API, I have created a line chart to display my data. To customize the legend, I initially set the chart's original legend to none and then designed my own legend according to my preferences. While everything is functioning ...

javascripthtmljquerychartsgoogle-visualization

How to append double zeros to a number in Material UI Data Grid

I'm currently working on a React.js application that utilizes the DataGrid component from the Material UI (MUI) library to display data. My challenge lies in formatting full numbers with trailing zeroes for better clarity. For example, displaying 625 ...

javascriptreactjsmaterial-ui

Exploring properties of nested elements in React

Picture a scenario where a specific element returns: <Component1> <Component2 name="It's my name"/> </Component1> Now, what I want to accomplish is something like this: <Component1 some_property={getComponent2'sN ...

javascriptreactjstypescriptwebcomponents

What is the relationship between JavaScript node modules and vanilla script references within the browser environment?

When using the modular javascript approach with Node.JS + npm and browserify, how do you handle situations where you need to use javascript libraries that are not available on npm? Some of these libraries may not be compatible with modularity (amd/commonJs ...

javascriptnode.jsknockout.jsnpmbrowserify

Retrieving the source code of a specific http URL using JavaScript

Is it feasible to obtain the source code of a webpage using JavaScript on the client side? Perhaps with AJAX? However, can I ensure that the server from which I am downloading the URL sees the client's IP address? Using AJAX could potentially reveal ...

javascriptajaxurl

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Having trouble resolving the dependency tree within react-navigation-stack

Trying to understand navigation in React-native and attempting to execute the following code: import React, {Component} from 'react'; import {StyleSheet, Text, View} from 'react-native'; import {createAppContainer} from 'react-nav ...

javascriptreactjsreact-nativenpmreact-navigation-stack

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

What is the best way to gather Data URI content through dropzone.js?

I am currently utilizing Dropzone for its thumbnail generation feature and user interface. However, I am only interested in using the thumbnail generation ability and UI and would prefer to collect all the data URIs myself and send them to the server via a ...

javascriptangularjshtmldropzone.js

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

javascriptarraysreactjsgoogle-chrome-devtoolsnested-lists

Utilizing Javascript to export modules and call multiple functions simultaneously

Is there a way to automate the calling of all functions within a module instead of individually selecting each one? For instance: bettermovies.js module.exports={ printAvatar: function(){ console.log("Avatar"); }, printLord: funct ...

javascriptmoduleexport

Integrating JQuery with Sencha Touch: A Comprehensive Guide

Can you show me how to use JQuery with Sencha Touch? I have a Sencha button but when I click on it, nothing happens. I've checked that JQuery is working. xtype: 'button', text: 'Get result', docked: 'bottom', id: 'm ...

javascriptjquerysencha-touch

Using Vue.js to loop through data objects when a button is clicked

I'm currently working on building a quiz functionality using vue.js, but I've hit a roadblock in trying to make the "Next" button cycle through my data. The goal is to have the screen display the object containing the question and answers (e.g. q ...

javascriptvue.jsmethodsiteratorvue-component

Submitting a form into a database with the help of AJAX within a looping structure

Trying to input values into the database using AJAX. The rows are generated in a loop from the database, with each row containing a button column. Clicking on the button submits the values to the database successfully. The issue is that it only inserts va ...

javascriptphphtmlajax