I need to create a userform with a code that has Top focus music with the select
ID: 3851542 • Letter: I
Question
I need to create a userform with a code that has Top focus music with the selection options : when preparing for an exam, when completing homework, and when writing a paper. When the the user picks one of the three it should a message that says The best song to lissten to is JaBig or YellowBrickCinema or Just instrumental music in addition it should give a random percentage of how many people use one of the selections. It needs to have an btnOk, btncancel, and UserForm_Initialize. Could you please leave a copy code and comments.
Explanation / Answer
<!-- need to connect to internet to access below files or download files(bootstrap.min.css,jquery.min.js,bootstrap.min.js) -->
<html lang="en">
<head>
<title>Music Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<br><button class="dropbtn">Focus Music</button>
<div class="dropdown-content">
<a href="#">when preparing for an exam</a>
<a href="#">when completing homework</a>
<a href="#">when writing a paper</a>
</div>
</div>
<button type="button" id="show_music_msg"class="btn btn-info btn-sm-1" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- message code start here -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Music Info</h4>
</div>
<div class="modal-body">
<p id='modal_msg'></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal">UserForm_Initialize</button>
</div>
</div>
</div>
</div>
</body>
<script>
<!-- function Show_pop_up to show message info dynamically -->
function Show_pop_up(par){
if(par=="exam"){
document.getElementById('modal_msg').innerHTML = "The best song to lissten to is JaBig";
$('#show_music_msg').click();
}
if(par=="homework"){
document.getElementById('modal_msg').innerHTML = "The best song to lissten to is YellowBrickCinema ";
$('#show_music_msg').click();
}
if(par=="paper"){
document.getElementById('modal_msg').innerHTML = "The best song to lissten to is instrumental music ";
$('#show_music_msg').click();
}
}
</script>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.