I am working on a E-learning shiny web application which lets students learn R functions easily. The user should be able to drag and drop grids into the blanks provided to answer a particular question syntactically. I have written the HTML file, including the styling and javascript in it. I have used the includeHTML("index.html") function to include the HTML file to the ui.R part of the application. Now, I need to implement communication between the ui.R and server.R in such a way that when the user drags and drops all the grids in the desired blanks and clicks the "Submit" button, the concatenated version of the function needs to go to the server side, R interpreter needs to evaluate the statement and then send back the output which needs to be displayed to the user. How do I send the concatenated message from webpage to server.R? Evaluate the function? And how do I send back the output back to the web page?
Example: Q. Write a function in R for sum of two digits:
sum, diff, mean, median, etc
1,2,3,4,5...
( ) . , / : " ' { } [ ] ( )
My HTML, CSS and Javascript file is as follows:
E-learning 'R' The function for sum of any two digits in 'R' syntax is:
span { width: 50px; display: inline-block; height: 20px; background: #ffffff; }
body {
font: 13px Verdana;
background-color: grey;
}
ul.numbers {
list-style: none;
padding: 10px;
background: grey;
}
ul.symbols {
list-style: none;
padding: 10px;
background: grey;
}
ul.functions {
list-style: none;
padding: 10px;
background: grey;
}
ul.numbers li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FFF706;
}
ul.symbols li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #18FC7A;
}
ul.functions li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FF99F7;
}
p {
padding: 10px;
color: black;
background-color: #0680FF;
}
answer span{
width: 100px;
}
.quiz-wrapper {
position: relative;
display: block;
width: 510px;
height: 450px;
}
.quiz-wrapper p.question-description {
background: #19286C;
color: white;
padding: 25px 20px;
}
.quiz-wrapper ul.options {
position: relative;
display: inline-block;
vertical-align: top;
width: 165px;
list-style: none;
border: 1px solid #19286C;
text-align: center;
padding: 0;
margin: 0;
}
.quiz-wrapper ul.options li {
border: 1px solid transparent;
padding: 6px 8px;
}
.quiz-wrapper ul.options li.title {
background: #19286C;
color: white;
}
.quiz-wrapper ul.options li.option {
display: block;
position: relative;
z-index: 50;
font-size: 13px;
}
.quiz-wrapper .answers {
display: inline-block;
width: 335px;
font-size: 13px;
line-height: 20px;
}
.quiz-wrapper .answers .target {
display: inline-block;
width: 110px;
background: lightblue;
margin: 0 3px;
text-align: center;
}
.quiz-wrapper button[type="submit"] {
display: block;
position: relative;
margin: 10px auto;
padding: 10px;
background: #19286C;
border: none;
color: white;
font-size: 16px;
}
.lightbox-bg {
display: none;
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.status {
display: none;
position: absolute;
z-index: 110;
text-align: center;
width: 80%;
top: 220px;
left: 47px;
}
.status p {
background: white;
padding: 30px;
}
<body>
<ul class="numbers">
<li class="number" data-target="wrong1">0</li>
<li class="number" data-target="wrong2">1</li>
<li class="number" data-target="right3">2</li>
<li class="number" data-target="right5">3</li>
<li class="number" data-target="wrong3">4</li>
<li class="number" data-target="wrong4">5</li>
<li class="number" data-target="wrong5">6</li>
<li class="number" data-target="wrong6">7</li>
<li class="number" data-target="wrong7">8</li>
<li class="number" data-target="wrong8">9</li>
</ul>
<ul class="functions">
<li class="function" data-target="right1">sum</li>
<li class="function" data-target="wrong9">median</li>
<li class="function" data-target="wrong10">mean</li>
<li class="function" data-target="wrong11">sqrt</li>
<li class="function" data-target="wrong12">log</li>
<li class="function" data-target="wrong13">min</li>
<li class="function" data-target="wrong14">max</li>
<li class="function" data-target="wrong15">abs</li>
<li class="function" data-target="wrong16">round</li>
<li class="function" data-target="wrong17">add</li>
</ul>
<ul class="symbols">
<li class="symbol" data-target="right2">(</li>
<li class="symbol" data-target="right6">)</li>
<li class="symbol" data-target="right4">,</li>
<li class="symbol" data-target="wrong18">.</li>
<li class="symbol" data-target="wrong19">/</li>
<li class="symbol" data-target="wrong20">?</li>
<li class="symbol" data-target="wrong21">+</li>
<li class="symbol" data-target="wrong22">=</li>
<li class="symbol" data-target="wrong23">-</li>
<li class="symbol" data-target="wrong24">*</li>
</ul>
<p id="answer">Message is: <span id = "display"></span> </p>
<script>
$(document).ready(function() {
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$(this).addClass('matched');
}
});
$("ul li").draggable({
helper:"clone",
revert: "invalid"
});
})
</script>
ui.R:
library(shiny)
shinyUI(fluidPage(
includeHTML("index.html")
))
server.R:
library(shiny)
shinyServer(function(input, output) {
observeEvent(input$res){
eval(res);
print(res);
}
})
Related
I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely
I have been following various tutorials / guides online as of how to create a responsive header, and I have finally been able to complete it except in the sense that I can't make it open. Whenever I click the fa-bars, absolutely nothing happens...
HTML:
<header id="header" class="main-header">
<div class="container">
<h1 class="header-logo navigation-hover">Logo</h1>
<i class="iconbars fa fa-bars" aria-hidden="true"></i>
<nav class="nav" id="nav">
<ul class="links" id="links">
<li class="active navigation-hover">
Home
</li>
<li class="navigation-hover">
About
</li>
<li class="navigation-hover">
Services
</li>
<li class="last navigation-hover">
Contact
</li>
</ul>
</nav>
</div>
</header>
CSS (sorry if it's long):
* {
margin: 0;
padding: 0;
}
#header {
top: 0;
z-index: 2;
position: fixed;
width: 100%;
height: 50px;
background: #f2f2f2;
color: #535a60;
border-bottom: 2px solid #999;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.header-logo {
padding: 0px 5px;
line-height: 50px;
margin: 0px;
font-size: 1.2em;
float: left;
}
.header-logo a {
font-family: "Lato", sans-serif;
text-decoration: none;
color: #535a60;
}
#nav {
float: right;
right: 0;
height: 50px;
}
#nav ul {
width: 100%;
display: inline-block;
top: 0;
margin: 0;
padding: 0;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
font-family: "Roboto", sans-serif;
line-height: 50px;
text-transform: uppercase;
height: 50px;
display: inline-block;
color: #535a60;
text-decoration: none;
padding: 0 20px;
font-size: 15px;
}
Jquery:
$(function () {
var pagewidth = $(window).width(),
links = $("#links"),
linksBtn = $("#linksBtn"),
icon = $("#linksBtn .iconbars");
if (pagewidth < 700) {
links.hide();
icon.addClass("fa-bars");
}
$("#linksBtn .iconbars").click(function(e) {
$("#links").slideToggle();
icon.toggleClass("fa-bars");
icon.toggleClass("fa-times");
});
$(window).on('resize', function () {
if ($(this).width() > 700) {
links.show();
icon.addClass("fa-times");
icon.removeClass("fa-bars");
} else {
links.hide();
icon.addClass("fa-bars");
icon.removeClass("fa-times");
}
})
});
You can only have one id on an element
try:
<i class="iconbars fa fa-bars" aria-hidden="true"></i>
$("#linksBtn").click(function() {
$("#links").slideToggle();
icon.toggleClass("fa-bars");
icon.toggleClass("fa-times");
});
I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.
also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Newbie in JS / jQuery here.
First problem: When page is loading or it is refreshing whole sub-sub menus are blinked for like 0.5sec so they can "hide". I have put the script firstly on the end of "body" tag, but after this blink I've put it in "head" so is there any way to make it actually hide, like really hide, to not be shown when page is on load?
Second problem is when I'm clicking on either blue or green square menu is not sliding smoothly. It's like a bounce effect. Is it because of "hide"? And last problem is with slideDown function. Where shall I use slideUp to make it go back to the position where it hides?
jQuery(document).ready(function($)
{
$(".raid ul").hide();
$(".raid").hide();
$(".wod").one("click", function()
{
$(".wod ul li").slideDown(200);
});
$(".mop").one("click", function()
{
$(".mop ul li").slideDown(200);
});
$(".hfc").click(function()
{
$(".hfc").addClass('x');
$(".hfc ul").slideToggle(200);
});
$(".soo").click(function()
{
$(".soo ul").slideToggle(200);
});
});
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#progress
{
padding: 0;
float: left;
width: 200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
box-shadow: 2px 2px 2px 0px black;
background-repeat: no-repeat;
}
h1
{
margin-top: 8px;
border-bottom: 4px solid #00c99a;
padding-bottom: 4px;
}
.expansion
{
text-align-last: center;
width: inherit;
height: 108px;
}
.expansion:first-child
{
margin-top: -20px;
}
.mop, .wod
{
width: inherit;
height: inherit;
}
.wod > ul
{
margin-top: 90px;
}
.mop > ul
{
margin-top: 90px;
}
.wod
{
border-bottom: 5px solid black;
background-color: blue;
}
.mop
{
border-bottom: 5px solid black;
background-color: green;
}
.raid > ul
{
padding-bottom: 10px;
}
h3
{
font-size: 20px;
padding: 10px 0 10px 0;
}
.nhm
{
display: inline-block;
text-align: center;
padding: 4px 20px 1px 20px;
border: 2px solid white;
border-radius: 50px;
cursor: default;
color: white;
font-weight: 300;
}
.hfc-progress, .soo-progress,
{
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
color: white;
}
.hfc, .soo
{
color: limegreen;
background-color: rgba(37, 65, 23, 0.5);
}
.hfc:hover, .soo:hover
{
cursor: pointer;
color: greenyellow;
}
.x
{
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
<div id="expansion">
<ul>
<li class="expansion wod"><br />
<ul>
<li class="raid hfc"><h3>Hellfire Citadel ↓</h3>
<ul>
<li class="hfc-progress">Hellfire Assault
<ul>
<li class="nhm hfcn">N</li>
<li class="nhm hfch">H</li>
<li class="nhm hfcm">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expansion mop"><br />
<ul>
<li class="raid soo"><h3>Siege of Orgrimmar↓</h3>
<ul>
<li class="soo-progress">Immerseus
<ul>
<li class="nhm soon">N</li>
<li class="nhm sooh">H</li>
<li class="nhm soom">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
If you really want the elements hidden, use CSS. The CSS can have properties like
.raid ul {
display: none;
}
.raid {
display: none;
}
instead of calling the hide() function in jQuery. This way, if you include the CSS in the head section and keep your JS in the bottom, the blink would not happen (because the browser would keep them hidden by default)
I want to check if the link "meist" is clicked or not, and if it is clicked then change the submenu to submeist. So if you hover your mouse out then it will automatically go back to the submeist menu
The submenu will disappear when I want to click something on the submenu. I couldn't figure out the fix for it either.
$(document).ready(function() {
$("#meist").mouseleave(function() {
$("#submeist").hide();
return false;
});
$("#meist").mouseenter(function() {
$("#submeist").show();
return false;
});
$("#seadmed").mouseleave(function() {
$("#subseadmed").hide();
return false;
});
$("#seadmed").mouseenter(function() {
$("#subseadmed").show();
return false;
});
});
#meist {
display: inline;
float: left;
width: 180px;
height: 50px;
color: #191919;
text-align: center;
overflow: hidden;
background: #990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
}
#meist:hover {
text-decoration: underline;
color: white;
font-size: 17.5px;
line-height: 15px;
}
#seadmed {
display: inline;
float: left;
width: 180px;
height: 50px;
color: #191919;
text-align: center;
overflow: hidden;
background: #990000;
}
#seadmed:hover {
text-decoration: underline;
color: white;
font-size: 17.5px;
line-height: 15px;
}
#submenu {
color: white;
height: 25px;
width: 900px;
background: #630000;
margin-top: 50px;
}
#submeist {
display: none;
font-size: 12px;
}
#submeist .asi1 {
margin-left: 70px;
height: 25px;
width: 75px;
}
#submeist .asi2 {
margin-left: 25px;
}
#submeist .asi3 {
margin-left: 25px;
}
#subseadmed {
display: none;
font-size: 12px;
}
#subseadmed .item1 {
margin-left: 70px;
height: 25px;
width: 75px;
}
#subseadmed .item2 {
margin-left: 25px;
}
#subseadmed .item3 {
margin-left: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li id="meist">
<p>Meist</p>
</li>
<li id="seadmed">
<p>Seadmed</p>
</li>
</ul>
<div id="submenu">
<ul id="submeist">
<li class="asi1">
Asi 1
</li>
<li class="asi2">
Asi 2
</li>
<li class="asi3">
Asi 3
</li>
</ul>
<ul id="subseadmed">
<li class="item1">
Item 1
</li>
<li class="item2">
Item 2
</li>
<li class="item3">
Item 3
</li>
</ul>
</div>
I guess you can delay the hide que by adding
$("#meist").mouseleave(function () {
$("#submeist").delay(1000).hide('fast');
return false;
});
and
$("#seadmed").mouseleave(function () {
$("#subseadmed").delay(1000).hide('fast');
return false;
Be careful delaying a que. Add it only if necessary. This can be one of the temporary solution, this is not the only solution.
Increase the timing to hide the Submenu's based on the requirement.