need spinweel in Qlik Sense - Qlik Community

rajeshqvd · ‎2020-06-05

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinning Wheel Game</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body{
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: #FFA333 ;
background-size: cover;
}

.mainbox{
position: relative;
width: 500px;
height: 500px;
}
.mainbox:after{
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/1024px-...') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box{
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span{
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1{
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #ffeb3b;
top: 120px;
left: 0;
}
.span2{
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #e91e63;
top: 120px;
right: 0;
}
.span3{
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #4caf50;
bottom: 0;
left: 120px;
}
.span4{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #3f51b5;
top: 0;
left: 120px;
}

/*Little bit adjust the value*/
.box1 .span3 b{
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b{
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b{
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b{
transform: translate(-50%, -50%) rotate(-85deg);
}

.box2{
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b{
width: 65px;
height: 65px;
line-height: 65px;
border-radius: 50%;
font-size: 26px;
text-align: center;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: inset 0 3px 3px 0 #717171;
}
.spin{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #ff5722;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active{
width: 70px;
height: 70px;
font-size: 20px;
}

.mainbox.animate:after{
animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow{
50%{
right: -40px;
}
}
</style>
</head>
<body>
<div>
<h1 style="text-align:center;color:white;">TEAM A</h1>
Round 1 : <input onblur="findTotal()" type="text" name="A" id="A1"/><br>
Round 2 : <input onblur="findTotal()" type="text" name="A" id="A2"/><br>
Round 3 : <input onblur="findTotal()" type="text" name="A" id="A3"/><br>
Round 4 : <input onblur="findTotal()" type="text" name="A" id="A4"/><br>
Round 5 : <input onblur="findTotal()" type="text" name="A" id="A5"/><br>

<br><br>
Total : <textarea type="text" name="total" id="total"/></textarea>
</div>

<br><br>
Total :<textarea type="text" name="total1" id="total1"/></textarea>
</div>
<div> <h1 style="color:#56F938"> SPIN > >></h1> </div>

<div id="mainbox" class="mainbox">
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>238</b></span>
<span class="span2"><b>157</b></span>
<span class="span3"><b>159</b></span>
<span class="span4"><b>325</b></span>
</div>
<div class="box2">
<span class="span1"><b>138</b></span>
<span class="span2"><b>125</b></span>
<span class="span3"><b>298</b></span>
<span class="span4"><b>385</b></span>
</div>
</div>

var x = 1024; //min value
var y = 9999; // max value

var deg = Math.floor(Math.random() * (x - y)) + y;

document.getElementById('box').style.transform = "rotate("+deg+"deg)";

var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function(){
element.classList.add('animate');
}, 5000); //5000 = 5 second
}

</script>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('A');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

</script>

<script type="text/javascript">
function findTotalB(){
var arr = document.getElementsByName('B');
var totB=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
totB += parseInt(arr[i].value);
}
document.getElementById('total1').value = totB;
}

</script>

<audio id="audio" src="spin.wav" autoplay="false" ></audio>
<script>
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
</script>

</body>
</html>

rajeshqvd · ‎2020-06-05

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinning Wheel Game</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body{
font-family: Open Sans;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background: #FFA333 ;
background-size: cover;
}

.mainbox{
position: relative;
width: 500px;
height: 500px;
}
.mainbox:after{
position: absolute;
content: '';
width: 32px;
height: 32px;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Circle_arrow_left_font_awesome.svg/1024px-...') no-repeat;
background-size: 32px;
right: -30px;
top: 50%;
transform: translateY(-50%);
}
.box{
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
border: 10px solid #fff;
overflow: hidden;
transition: all ease 5s;
}
span{
width: 50%;
height: 50%;
display: inline-block;
position: absolute;
}
.span1{
clip-path: polygon(0 92%, 100% 50%, 0 8%);
background-color: #ffeb3b;
top: 120px;
left: 0;
}
.span2{
clip-path: polygon(100% 92%, 0 50%, 100% 8%);
background-color: #e91e63;
top: 120px;
right: 0;
}
.span3{
clip-path: polygon(50% 0%, 8% 100%, 92% 100%);
background-color: #4caf50;
bottom: 0;
left: 120px;
}
.span4{
clip-path: polygon(50% 100%, 92% 0, 8% 0);
background-color: #3f51b5;
top: 0;
left: 120px;
}

/*Little bit adjust the value*/
.box1 .span3 b{
transform: translate(-50%, -50%) rotate(-270deg);
}
.box1 .span1 b,
.box2 .span1 b{
transform: translate(-50%, -50%) rotate(185deg);
}
.box2 .span3 b{
transform: translate(-50%, -50%) rotate(90deg);
}
.box1 .span4 b,
.box2 .span4 b{
transform: translate(-50%, -50%) rotate(-85deg);
}

.box2{
width: 100%;
height: 100%;
transform: rotate(-135deg);
}
span b{
width: 65px;
height: 65px;
line-height: 65px;
border-radius: 50%;
font-size: 26px;
text-align: center;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: inset 0 3px 3px 0 #717171;
}
.spin{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75px;
height: 75px;
border-radius: 50%;
border: 4px solid #fff;
background-color: #ff5722;
color: #fff;
box-shadow: 0 5px 20px #000;
font-weight: bold;
font-size: 22px;
cursor: pointer;
}
.spin:active{
width: 70px;
height: 70px;
font-size: 20px;
}

.mainbox.animate:after{
animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow{
50%{
right: -40px;
}
}
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgb(0,0,0);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:50px;
width:50px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(login.png) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>

<div>
<h1 style="text-align:center;color:white;">TEAM A</h1>
Round 1 : <input onblur="findTotal()" type="text" name="A" id="A1"/><br>
Round 2 : <input onblur="findTotal()" type="text" name="A" id="A2"/><br>
Round 3 : <input onblur="findTotal()" type="text" name="A" id="A3"/><br>
Round 4 : <input onblur="findTotal()" type="text" name="A" id="A4"/><br>
Round 5 : <input onblur="findTotal()" type="text" name="A" id="A5"/><br>

<br><br>
Total : <textarea type="text" name="total" id="total"/></textarea>
</div>

<br><br>
Total :<textarea type="text" name="total1" id="total1"/></textarea>
</div>
<div align="center">
<br><br><br><br>
<a href="#loginScreen" class="button">Hide Screen</a>
</div>
<div id="loginScreen">
<a href="#" class="cancel">×</a>
</div>
<div id="cover" >
</div>
<div> <h1 style="color:#56F938"> SPIN > >></h1> </div>

<div id="mainbox" class="mainbox">
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>238</b></span>
<span class="span2"><b>157</b></span>
<span class="span3"><b>159</b></span>
<span class="span4"><b>325</b></span>
</div>
<div class="box2">
<span class="span1"><b>138</b></span>
<span class="span2"><b>125</b></span>
<span class="span3"><b>298</b></span>
<span class="span4"><b>385</b></span>
</div>
</div>

var x = 1024; //min value
var y = 9999; // max value

var deg = Math.floor(Math.random() * (x - y)) + y;

document.getElementById('box').style.transform = "rotate("+deg+"deg)";

var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function(){
element.classList.add('animate');
}, 5000); //5000 = 5 second
}

</script>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('A');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}

</script>

<script type="text/javascript">
function findTotalB(){
var arr = document.getElementsByName('B');
var totB=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
totB += parseInt(arr[i].value);
}
document.getElementById('total1').value = totB;
}

</script>

<audio id="audio" src="spin.wav" autoplay="false" ></audio>
<script>
function playSound() {
var sound = document.getElementById("audio");
sound.play();
}
</script>

</body>
</html>