I want to create a dynamic survery webpage with JavaScript.
I have 10 Questions which display types are set to "none" expect the first/actual questions displaytype is "block". Each question is a yes-no question. It's relevant which answer the user choose to see the next question.
I know how to build this static but I wanted a dynamic solution for this problem.
Can anybody help?
Here is a schema of my problem
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10 Questions</title>
<script>
...
</script>
</head>
<body>
<header>A Dynamic Questionaire.</header>
<section>
<article>
<hgroup>
<h1>Questionaire</h1>
<h2>Anwer the questions in order as they appear.</h2>
</hgroup>
<div id="Question1" style="display:block;">
1.
<button type="button" id="btnYes1">Yes</button>
<button type="button" id="btnNo1">No</button>
</div>
<div id="Question2" style="display:none;">
2.
<button type="button" id="btnYes2">Yes</button>
<button type="button" id="btnNo2">No</button>
</div>
<div id="Question3" style="display:none;">
3.
<button type="button" id="btnYes3">Yes</button>
<button type="button" id="btnNo3">No</button>
</div>
<div id="Question4" style="display:none;">
4.
<button type="button" id="btnYes4">Yes</button>
<button type="button" id="btnNo4">No</button>
</div>
<div id="Question5" style="display:none;">
5.
<button type="button" id="btnYes5">Yes</button>
<button type="button" id="btnNo5">No</button>
</div>
<div id="Question5" style="display:none;">
6.
<button type="button" id="btnYes6">Yes</button>
<button type="button" id="btnNo6">No</button>
</div>
<div id="Question5" style="display:none;">
7.
<button type="button" id="btnYes7">Yes</button>
<button type="button" id="btnNo7">No</button>
</div>
<div id="Question5" style="display:none;">
8.
<button type="button" id="btnYes8">Yes</button>
<button type="button" id="btnNo8">No</button>
</div>
<div id="Question5" style="display:none;">
9.
<button type="button" id="btnYes9">Yes</button>
<button type="button" id="btnNo9">No</button>
</div>
<div id="Question5" style="display:none;">
10.
<button type="button" id="btnYes10">Yes</button>
<button type="button" id="btnNo10">No</button>
</div>
</article>
</section>
</body>
</html>
There are a ton of ways you could do this. A quick approach would be to put some information in the button that indicates where to take the user next. So here I've added a data-next value on each button that matches the id of the next panel to show, and I toggle a class in CSS to show/hide panels.
var buttons = document.getElementsByTagName('button'),
questions = document.getElementsByTagName('div');
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener('click', function() {
var target = this.getAttribute('data-next');
for (var j = 0; j < questions.length; j++) {
var question = questions[j];
if (question.id == target) {
question.classList.add('show');
} else if (question.classList.contains('show')) {
question.classList.remove('show');
}
}
});
}
div {
display: none;
}
.show {
display: block;
}
<div id="Question1" class="show">
1.
<button type="button" data-next="Question2">Yes</button>
<button type="button" data-next="Question3">No</button>
</div>
<div id="Question2">
2.
<button type="button" data-next="Question4">Yes</button>
<button type="button" data-next="Question5">No</button>
</div>
<div id="Question3">
3.
<button type="button" data-next="Question6">Yes</button>
<button type="button" data-next="Question6">No</button>
</div>
<div id="Question4">
4.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question5">
5.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question6">
6.
<button type="button" data-next="Question7">Yes</button>
<button type="button" data-next="Question8">No</button>
</div>
<div id="Question7">
7.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question8">
8.
<button type="button" data-next="Question9">Yes</button>
<button type="button" data-next="Question9">No</button>
</div>
<div id="Question9">
9.
<button type="button" data-next="Question10">Yes</button>
<button type="button" data-next="Question10">No</button>
</div>
<div id="Question10">
10.
</div>
Related
function openclass(className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(className).style.display = "block";
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass('viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass('addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass('addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass('assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
With first button already active, I want to make every other button active on click and and remove older active, I know it can be done through js but really can't seem to figure it out
You just need to add the clickedbutton inside the onclick arguments. You can do that by using the this keyword. So onclick=openClass(this, 'className')
And then, on click, remove all the ' active classes ' and add the active class to the clickedButton
function openclass(clickedBtn, className) {
var i;
var x = document.getElementsByClassName("standard");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(`${className}`).style.display = "block";
// add remove active class
document.querySelectorAll('.btn').forEach(btn => btn.classList.contains('active') && btn.classList.remove('active'))
clickedBtn.classList.add('active')
}
.btn.active {
background:Red;
}
<div class="page-header">
<button type="button" class="btn btn-primary active" aria-pressed="true" onclick="openclass(this,'viewclass')">View Class</button>
<button type="button" class="btn btn-primary" aria-pressed="true" onclick="openclass(this, 'addclass')">Add Class</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'addsection')">Add Section</button>
<button type="button" class="btn btn-primary" onclick="openclass(this,'assignteacher')">Assign Teacher</button>
</div>
<div id="viewclass" class="standard">
<h1>View Class</h1>
</div>
<div id="addclass" class="standard" style="display:none">
<h2>Add Class</h2>
</div>
<div id="addsection" class="standard" style="display:none">
<h2>add section</h2>
</div>
<div id="assignteacher" class="standard" style="display:none">
<h2>assign teacher</h2>
</div>
I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.
User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.
The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(13)">#Language.T37</button>
I have tried :focus in CSS but only 1 button can be select.
This is my code, I take out the onclick in button for test purposes.
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary">Tuesday</button>
<button type="button" class="btn btn-primary">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group">
<button type="button" class="btn btn-primary">9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary">8 pm</button>
</div>
</div>
</div>
function switch_to_green(el){
//Check clicked button is on the same group
if(el.parentElement.getAttribute("data-group") == 1){
//Get all buttons of group 1
let g1_buttons = document.querySelectorAll('#group1 .btn');
for(let i =0; i<g1_buttons.length;i++){
//Remove green color from unselected buttons
g1_buttons[i].classList.remove('green');
}
}else{
//Get all buttons of group 2
let g2_buttons = document.querySelectorAll('#group2 .btn');
for(let i =0; i<g2_buttons.length;i++){
//Remove green color from unselected buttons
g2_buttons[i].classList.remove('green');
}
}
//Add green color to the only selected one
el.classList.add('green');
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn.green{
color: white;
/*green*/
background-color: #85c995;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" data-group="1">
<button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" data-group="2">
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
<button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
</div>
</div>
</div>
I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)
I am trying to get signature pad to show up in my wordpress page.
I go to https://github.com/szimek/signature_pad and install the script. But nothing renders in wordpress. is there a specific way to make js work in wordpress?
Here is a js fiddle link of it: https://jsfiddle.net/szimek/jq9cyzuc/
*Ive added the following to header, and the html to the body (nothing happens) :
placed the following html
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
I have created signature code, it's working fine. Take a look at demo.
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas width="664" height="235" style="touch-action: none;"></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png">Save as PNG</button>
<button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
<button type="button" class="button save" data-action="save-svg">Save as SVG</button>
</div>
</div>
</div>
</div>
<script src="https://szimek.github.io/signature_pad/js/signature_pad.js"></script>
<script src="https://szimek.github.io/signature_pad/js/app.js"></script>
I am using the slideToggle method to hide/show a div. I am trying to replicate this action multiple times on a page but it only works on the 1st one. I figured out a way to have it work on each div but have to rename each div and add a new function in the javascript. What can I do to clean up my code as I am going to be using this through out the page and be creating new instances for each div does is not efficient.
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
$("#flip2").click(function() {
$("#panel2").slideToggle("slow");
});
$("#flip3").click(function() {
$("#panel3").slideToggle("slow");
});
});
</script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div id="flip">Click to view HTML</div>
<div id="panel" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div id="flip2">Click to view HTML</div>
<div id="panel2" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div id="flip3">Click to view HTML</div>
<div id="panel3" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn select-options"><span>select options</span></button>
</textarea>
</div>
You can use classes instead of ids and use .next() method in callback function:
$(document).ready(function(){
$(".flip").click(function(){
$(this).next('.panel').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn a-cart disabled"><span>ADD TO CART</span>
</button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div class="flip">Click to view HTML</div>
<div class="panel" style="display:none">
<textarea rows="3" cols="50"><button type="button" class="btn select-options"><span>select options</span>
</button>
</textarea>
</div>
You need not to replicate this and rename <div> and create new function.
Take these steps:
Give same class to each div where you click to perform slideToggle(eg. flip).
Use selector $(this) to identify clicked element.
Use jquery .next() function to get the .next element.
Call .slideToggle() on that.
It's Done!!
See the code below:
<script>
$(document).ready(function() {
$(".flip").click(function() {
$(this).next().slideToggle("slow");
});
});
</script>
<p class="button-label">Active</p>
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart"><span>ADD TO CART</span> </button>
</textarea>
</div>
<p class="button-label">Disabled</p>
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel2" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button>
</textarea>
</div>
<p class="button-label">Select Options</p>
<button type="button" class="btn select-options"><span>select options</span></button>
<div class="flip">Click to view HTML</div>
<div id="panel3" style="display:none">
<textarea rows="3" cols="50">
<button type="button" class="btn select-options"><span>select options</span></button>
</textarea>
</div>