CUSTOM SPECIAL: POLL

A tiny live polling system that saves in a variable the player choice and the winning choice

SCRIPT

$quiz.on('trigger-poll',p=>{
	// poll $title:string
	// poll $list:string
	// poll $colors:string
	// poll $unit:select:count|percent
	// poll $duration:int:10:120
	// poll $choiceVar:string
	// poll $winnerVar:string
	if(!p.list) return;
	var P = $scope.poll = [];
	P.unit = p.unit || 'count';
	P.votes=0;
	P.max=1;
	P.title=p.title;
	var k=0, col = (p.colors || '').split(',');
	p.list.split(',').forEach(c=>{
		c = c.trim();
		P.push({id:c,votes:0,color:col[k++]||''});
	});
	P.vote = i=>{
		if(p.choiceVar) $player.set(p.choiceVar,P[i].id);
		$quiz.msg({t:'poll',i:i});
		P.voted=1;
	};
	$timeout(()=>{
		$scope.poll=0;
		if(p.winnerVar) $player.set(p.winnerVar,P.reduce((a, b) => a.votes >= b.votes ? a : b).id);
	},(p.duration || 30)*1000);
});

$quiz.on('msg-poll',p=>{
	var P = $scope.poll;
	var v = ++P[p.i].votes;
	if(v>P.max) P.max=v;
	P.votes++;
});
			

TEMPLATE

<div class="my-poll" ng-if="poll">
    <h3>{{::poll.title}}</h3>
    <div ng-repeat="p in ::poll">
        <a ng-if="!poll.voted" ng-click="poll.vote($index)">{{::p.id}}</a>
        <span class="my-poll-bar" ng-if="poll.voted" 
                ng-style="{width:(p.votes/poll.max)*100+'%',backgroundColor:p.color}">
            {{::p.id}} 
            <i ng-if="::poll.unit=='count'">&times;{{p.votes}}</i>
            <i ng-if="::poll.unit=='percent'">{{(p.votes/poll.votes)*100 | number:0}}%</i>
        </span>
    </div>
</div>
			

CSS

#quiz .my-poll {
    position: fixed;
    top: 40%;
    left: calc(50% - 200px);
    background: rgba(0,0,0,0.8);
    width: 400px;
    z-index: 100000000000000;
    border-radius: 10px;
    padding: 10px;
    color: white;
    font-size: 21px;
}
#quiz .my-poll-bar {
    user-select: none;
    transition: all .2s linear;
    display: inline-block;
    background: #077f89;
    white-space: nowrap;
    border-radius: 4px;
    margin-bottom: 3px;
    padding: 2px;
    padding-left: 4px;
}
#quiz .my-poll-bar i {
    position: absolute;
    right: 15px;
}
#quiz .my-poll a {
    color: orange;
    cursor: pointer;
}
#quiz .my-poll a:hover {
    color:cyan;
}
#quiz .my-poll h3 {
    user-select: none;
    color: gainsboro;
    margin-bottom: 5px;
}