// Add an HTML element to display the result
var resultText = d3.select("#chart")
.append("div")
.attr("id", "result")
.style({
"font-weight": "bold",
"font-size": "20px",
"margin-top": "20px"
});
function spin() {
// Disable click while spinning
container.on("click", null);
// Randomize the rotation angle
var randomRotation = Math.floor(Math.random() * 360) + 1800;
// Rotate the wheel
svg.transition()
.duration(3000) // Adjust duration as needed
.attrTween("transform", rotTween(randomRotation))
.each("end", function(){
// Get the result value from object "data"
var result = data[picked % data.length].value;
console.log(result);
// Display the result below the wheel
resultText.text("Result: " + result);
// Enable spinning again after the animation ends
container.on("click", spin);
});
}
// Remove the restriction on spinning only once
// Comment out this line:
// container.on("click", spin);
_--------_+---+--
var padding = {top:20, right:40, bottom:0, left:0},
w = 500 - padding.left - padding.right,
h = 500 - padding.top - padding.bottom,
r = Math.min(w, h)/2,
rotation = 0,
oldrotation = 0,
picked = 100000,
oldpick = [],
color = d3.scale.category20(); //category20c()
// Data for the wheel
var data = [
{"label":"Dell LAPTOP", "value":1, "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
{"label":"IMAC PRO", "value":2, "question":"What CSS property is used for changing the font?"}, //font-family
{"label":"SUZUKI", "value":3, "question":"What CSS property is used for changing the color of text?"}, //color
{"label":"HONDA", "value":4, "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
{"label":"FERRARI", "value":5, "question":"What CSS property is used for changing the size of text?"}, //font-size
{"label":"APARTMENT", "value":6, "question":"What CSS property is used for changing the background color of a box?"}, //background-color
{"label":"IPAD PRO", "value":7, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
{"label":"LAND", "value":8, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
{"label":"MOTOROLLA", "value":9, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
{"label":"BMW", "value":10, "question":"With CSS selectors, what character prefix should one use to specify a class?"}
];
// SVG container for the wheel
var svg = d3.select('#chart')
.append("svg")
.attr("width", w + padding.left + padding.right)
.attr("height", h + padding.top + padding.bottom)
.append("g")
.attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
// Add an HTML element to display the result
var resultText = d3.select("#chart")
.append("div")
.attr("id", "result")
.style({
"font-weight": "bold",
"font-size": "20px",
"margin-top": "20px"
});
// Function to rotate the wheel smoothly
function rotTween(to) {
var i = d3.interpolate(oldrotation % 360, rotation);
return function(t) {
return "rotate(" + i(t) + ")";
};
}
// Function to spin the wheel
function spin() {
// Disable click while spinning
container.on("click", null);
// Randomize the rotation angle
var randomRotation = Math.floor(Math.random() * 360) + 1800;
// Rotate the wheel
svg.transition()
.duration(3000) // Adjust duration as needed
.attrTween("transform", rotTween(randomRotation))
.each("end", function(){
// Get the result value from object "data"
var result = data[picked % data.length].value;
console.log(result);
// Display the result below the wheel
resultText.text("Result: " + result);
// Enable spinning again after the animation ends
container.on("click", spin);
});
}
// Draw the wheel elements (omitted for brevity)
// Add a container for spinning
var container = svg.append("g")
.attr("class", "spinner")
.attr("transform", "translate(" + (-w/2) + "," + (-h/2) + ")");
// Make the wheel spin when clicked
container.on("click", spin);
If you're not using a `<select>` element and instead spinning the wheel with custom JavaScript logic, you can adapt the `getValue()` function accordingly. Here's how you can modify it to retrieve the result value after spinning the wheel:
```javascript
function getValue() {
// Assume you have a <div> or <b> element with id "result" to display the selected value
var resultElement = document.getElementById("result");
// Example: Get the result value from the text content of the element with id "result"
var resultValue = parseInt(resultElement.textContent.replace("Result: ", ""));
// Use the resultValue as needed
console.log("Selected Value:", resultValue);
}
```
Replace `"result"` with the actual ID of the element where the spinning wheel's result is displayed in your HTML. This function assumes that the result value is displayed as text content within that element. Adjust the code based on how you're displaying and accessing the result value in your setup.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me