So I am having a couple of issues when using the voice library Artyom.js.
I have tried adding my own commands, and in theory, that should work. But the major issue is that the voice recognition stops immediately after enabling it. The following are the javascript, css and html files:
var five = require("johnny-five");
var keypress = require("keypress");
const artyom = new Artyom();
function startArtyom() {
artyom.initialize({
lang:"en-GB",
continous:true,
debug:true,
listen:true,
speed:1,
mode:"normal"
}).then(function(){
console.log("ready!");
})
}
var commandHello = {
indexes:["hello","good morning","hey"], // These spoken words will trigger the execution of the command
action:function(){ // Action to be executed when a index match with spoken word
artyom.say("Hey buddy ! How are you today?");
}
};
artyom.addCommands([commandHello]);
/*keypress(process.stdin);*/
/*var board = new five.Board();*/
body {
font-family: ebrima;
}
#body{
transition: all 3s ease-in-out;
}
#speech-cont {
background-color: gray;
height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
border-radius: 0.5vh;
padding: 10px;
}
#speech-cont h3 {
text-align: center;
color: white;
font-family: ebrima;
font-weight: lighter;
}
#speech-cont #box {
border-style: solid;
border-color: black;
border-radius: 0.5vh;
background-color: white;
height: 70%;
width: 90%;
margin-left: auto;
margin-right: auto;
border-width: 1px;
}
#recognizeButton {
height: auto;
line-height: 30px;
width: 200px;
margin-left: 50%;
transform: translateX(-50%);
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="body">
<div id="speech-cont">
<h3>Speech to text recognition</h3>
<div id="box">
<h4 id="result">
</h4>
</div>
<button id="recognizeButton" onclick="startArtyom();">Recognize!</button>
</div>
<script src="artyom.win.min.js"></script>
<script src="main.js"></script>
</body>
</html>
As you see, I even straight up copy & pasted the example from Atryom.js' site to see if I had written a typo. Which turned out to not be the case.
I have absolutely no idea as to why artyom.js immediately stops voice recognition.
Thanks in advance :)
Related
Here is the code. You are supposed to get from the left square to the right one without exiting the blue div or entering the red one. The problem is that both the red div and its child, the right square have the same event listener, but one ends the game in a loss and the other one in a victory. Is there a way to fix this without redoing everything?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
text-align: center;
}
.outer {
width: 500px;
height: 500px;
border-style: solid;
border-color: black;
border-width: 1px;
position: absolute;
left: 36%;
right: 50%;
margin-top: 100px;
background-color: lightskyblue;
}
.mid {
width: 440px;
height: 440px;
border-style: solid;
border-color: black;
border-width: 1px;
margin-left: 30px;
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
background-color: #ffbcbc;
}
.inner {
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 1px;
display: inline-block;
margin-top: 170px;
background-color: rgb(134, 255, 134);
}
#in1 {
float: left;
border-left: none;
}
#in2 {
float: right;
border-right: none;
}
</style>
</head>
<body>
<div class="outer" id="outer">
<div class="mid" id="mid">
<div class="inner" id="in1">
</div>
<div class="inner" id="in2">
</div>
</div>
</div>
<script>
let out = document.getElementById("outer")
let mid = document.getElementById("mid")
let in1 = document.getElementById("in1")
let in2 = document.getElementById("in2")
in1.addEventListener("mouseover", GameStart)
function GameOver() {
alert("Pokušajte ponovno")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameWon() {
alert("Pobijedili ste")
out.removeEventListener("mouseleave", GameOver)
mid.removeEventListener("mouseenter", GameOver)
in2.removeEventListener("mouseenter", GameWon)
return
}
function GameStart() {
in1.addEventListener("mouseleave", Game)
}
function Game() {
in1.removeEventListener("mouseleave", Game)
out.addEventListener("mouseleave", GameOver)
mid.addEventListener("mouseover", GameOver)
in2.addEventListener("mouseenter", GameWon)
}
</script>
</body>
</html>
You need to do event capture in this case. And explicitly look for the e.target (the element which was clicked) from which the event was fired and handle that logic seperately.
In the demo example, I have mimicked your game example : Try this
document.querySelector(".parent").addEventListener("click",(e)=>{
if(e.target.className === "child1"){
console.log("Continue the game")
}
if(e.target.className === "child2"){
console.log("Game Over !!!")
}
})
.child1,.child2{
background:teal;
height:100px;
width:300px;
}
.child1{
margin-bottom:2rem;
}
<div class="parent">
<div class="child1">
</div>
<div class="child2">
</div>
</div>
I am trying to create a similar design/approach to this:
https://help.sap.com/viewer/8092b085a68941f6aaa6708685a62b0d/4.2.8/en-US/acc57dbca1ab4a5bac2a352ce8cc52d8.html?q=Amazon
Notice that, when the sidebar << and >> icons are clicked, those sidebars slide out and the topic/content in the center expands to take the freed up space.
They're using AngularJS but I have to do this using html. I can use jquery, vanilla js, and if it makes sense I can try bootstrap (though I'm obviously not very experienced and want to stick to just html and jquery if possible).
Here is what I've come up with so far. Please excuse the awful color scheme - it's just to delineate the divs:
$("#right-sidebar-slider").click(function() {
$('#right-sidebar-content').hide('slide', {
direction: 'right'
}, 300);
$("#topic-container").animate({
width: "75%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
$("#left-sidebar-slider").click(function() {
$('#left-sidebar-content').hide('slide', {
direction: 'left'
}, 300);
$("#topic-container").animate({
width: "77%"
}, {
duration: 600,
specialEasing: {
width: 'linear'
}
});
});
#left-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#left-sidebar-content {
float: left;
width: 19%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
#topic-container {
float: left;
min-width: 58%;
min-height: 600px;
padding-top: 20px;
background-color: red;
}
#right-sidebar-slider {
float: left;
width: 3%;
padding-top: 20px;
background-color: green;
min-height: 600px;
}
#right-sidebar-content {
float: left;
width: 17%;
padding-top: 20px;
background-color: pink;
min-height: 600px;
}
.header {
display: flex;
align-items: center;
}
.header .logo {
background: url("logo-onlinehelp.png") no-repeat;
width: 60%;
height: 25px;
border: 1px solid green;
margin-left: 15px;
}
.header .search-input {
border: 2px solid blue;
width: 40%;
margin-left: 25px;
}
footer {
clear: left;
border-top: 1px solid #cccccc;
width: 100%;
height: 40px;
bottom: 0;
position: relative;
background-color: gray;
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="vertex.js"></script>
<script src="dhtml_toc.js"></script>
<script src="dhtml_search.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet_vertex.css">
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- need for slider effect -->
</head>
<body>
<div class="header" style="height: 70px; background-color: gray">
<div class="logo">
</div>
<div class="search-input">
<form action="#">
<input type="text" name="search-input" value="Search available topics..." size="70">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div id="left-sidebar-content">
Table of Contents...
</div>
<div id="left-sidebar-slider">
<<
</div>
<div id="topic-container">
Topic here...
</div>
<div id="right-sidebar-slider">
>>
</div>
<div id="right-sidebar-content">
Feedback form here...
</div>
<footer>
This is our footer text.
</footer>
</body>
</html>
So I have two questions:
1. In terms of overall page structure/approach - wHat is the best approach to building something like this?
What is the best approach to replicating the sliding divs? I don't need them to animate, though that would be nice. I just need the user to be able to fill the viewport with the center topic div content.
All of the actual content will come from a CMS. This single page I'm creating is just a template that the CMS (a proprietary one) will use to then insert the content, table of contents, etc. into the html.
Your approach is not far off, but I have a couple of suggestions:
CSS flexbox instead of floats to setup the three column layout. (A Complete Guide to Flexbox)
Use CSS transitions instead of javascript to add the sliding effect. (Using CSS transitions)
Let the click of a button add/remove a class to the sidebar elements, so you do not need to have presentational informasjon in your javascript
Codepen: https://codepen.io/anon/pen/XqaGEg
HTML:
<button class="sidebar-left-toggle">
<<
</button>
<button class="sidebar-right-toggle">
>>
</button>
<div class="container">
<div class="sidebar-left">sidebar-left</div>
<div class="content">content</div>
<div class="sidebar-right">sidebar-right</div>
</div>
CSS:
.container {
display: flex;
height: 200px;
transition: width 0.3s;
}
.sidebar-left,
.sidebar-right {
background: #ccc;
width: 200px;
transition: width 0.3s;
}
.sidebar-collapsed {
width: 0;
overflow: hidden;
}
.content {
background: #eee;
flex-grow: 1;
}
Javascript:
const leftToggle = document.querySelector('.sidebar-left-toggle');
const rightToggle = document.querySelector('.sidebar-right-toggle');
const leftSidebar = document.querySelector('.sidebar-left');
const rightSidebar = document.querySelector('.sidebar-right');
leftToggle.addEventListener('click', e => {
leftSidebar.classList.toggle('sidebar-collapsed');
});
rightToggle.addEventListener('click', e => {
rightSidebar.classList.toggle('sidebar-collapsed');
});
I'm trying to change colour of a button to show which images is displayed with JavaScript. Something similar to :Active in CSS. I've been looking for hours, I've managed to change just about every other element on the page except for the one I actually want to change, all I need is to change the background color of the clicked button and then revert back to original color a different button is clicked. Any help would be much appreciated.
<! doctype html>
<html>
<head>
<title>Task 2</title>
<!--styles-->
<style>
body {
margin: 0;
background-color: mediumpurple;
}
header {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
}
#content {
width: 80%;
background-color: green;
margin: auto;
}
nav {
float: left;
background-color: greenyellow;
width: 30%;
height: 750px;
text-align: center;
}
#pictureFrame {
float: left;
width: 70%;
height: 750px;
background-color: deeppink;
}
footer {
margin: auto;
width: 90%;
background-color: orangered;
height: 50px;
text-align: center;
clear: both;
}
.button {
margin-top: 100px;
background-color: white;
border-radius: 20px;
width: 70%;
height: 75px;
}
#img {
margin-top: 19%;
margin-left: 35%;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
}
</script>
</head>
<body>
<header>
<h1>Coffee</h1>
</header>
<section id="content">
<div id="pictureFrame">
<img src="" id="img" />
</div>
<nav>
<button id="button1" class="button" onclick="pic1()">Starbucks</button>
<br/>
<br/>
<button id="button2" class="button" onclick="pic2()">Muffin Break</button>
<br/>
<br/>
<button id="button3" class="button" onclick="pic3()">Costa</button>
</nav>
</section>
<footer>
<h1>This is a footer</h1>
</footer>
</body>
</html>
By clicking on each button simply change the background of that button with style.background='color'. Also reset the color of other two buttons. Simply create a function to reset the background color.
<script type="text/javascript">
function reset(){
document.getElementById("button1").style.background='white';
document.getElementById("button2").style.background='white';
document.getElementById("button3").style.background='white';
}
function pic1() {
document.getElementById("img").src = "images/starbucks.png";
reset();
document.getElementById("button1").style.background='red';
}
function pic2() {
document.getElementById("img").src = "images/muffin.png";
reset();
document.getElementById("button2").style.background='red';
}
function pic3() {
document.getElementById("img").src = "images/costa.png";
reset();
document.getElementById("button3").style.background='red';
}
</script>
Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/
I am trying to create a simple vote/poll program with javascript, I have tried to run it on xammp to see if it needed to be executed on a web server with no success. Do I need to include any script js files apart from vote.js like jquery or something? I am not sure.
Can someone help Thanks.
html
<!DOCTYPE html>
<html>
<head>
<title>Vote</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vote.js"></script>
</head>
<body>
<div class="content">
<h3 class="title">Who's better ?</h3>
<ul>
<li class="option" id="option_1">
Messi
<p class="score" id="score_1">0</p>
<div class="progressbar">
</div>
</li>
<li class="option" id="option_2">
Ronaldo
<p class="score" id="score_2">0</p>
<div class="progressbar">
</div>
</li>
</ul>
</div>
</body>
</html>
css
.content {
background-color: #5C5C5C;
height: 500px;
width: 600px;
font-family: CorpidRegular,Arial,Helvetica,sans-serif;
color: #fff;
font-weight: normal;
font-size: 1.5rem;
}
.progressbar_1 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}
.progressbar_2 {
width: 400px;
border-radius: 0px;
margin-left: 100px;
}
h3{
text-align: center;
padding: 40px;
margin: 0px;
font-weight: normal;
}
ul{
list-style-type: none;
display: inline;
padding: 0px;
}
.option:first-child {
background: blue;
}
.option {
background: black;
}
li{
margin: 0px;
padding: 0px;
text-align: center;
color: #fff;
cursor: pointer;
}
li:hover {
color: yellow;
}
js
var totalVotes = 0;
$('.option').click(function() {
var $this = $(this);
// store voting value in data-voting
if (!$this.data('voting'))
$this.data('voting', 0);
var voting = parseInt($this.data('voting'), 10);
voting++;
totalVotes++;
$this.data('voting', voting);
updateProgressBars();
});
function updateProgressBars()
{
$('.option').each(function()
{
var $this = $(this);
var voting = parseInt($(this).data('voting'), 10);
var pct = Math.round((voting / totalVotes) * 100);
if (isNaN(voting)) voting = 0;
if (isNaN(pct)) pct = 0;
$this.find('progressbar').progressbar({value: pct});
$this.find('.score').html(voting + ' of ' + totalVotes + ' (' + pct + '%)');
});
}
You only close html tag, didin't open tag
I've been having some trouble getting JQuery UI selectable to work with my site. I'm still very new to coding and I'm not sure what I'm doing wrong. I've searched for relevant questions and haven't been able to find any that let me figure it out.
I'm trying to create whats essentially a glorified label maker for work, and would like to be able to select cells in a grid using a mouse "lasso." But for some reason, I can't get selectable to work at all.
Here is the js:
$('document').ready(function() {
for (i=0; i<117;i++) {
$('#plateActual').append('<div class="cell"/>');
}
$('#plateActual').selectable();
});
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="navbar">
</div>
<div id="controlPanel">
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
<p>test<br>test<br>test<br>test<br>test<br>test<br></p>
</div>
<div id="plateEditor">
<div id="plateActual">
</div>
</div>
<div id="bottom">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</body>
Here is the CSS:
body {
margin: 0px auto;
padding: 0;
}
p {
color: yellow;
}
#wrapper {
border: 1px dotted black;
width: 980px;
margin: 0px auto;
padding: 0;
}
#navbar {
width: 980px;
background: black;
height: 50px;
position: fixed;
margin: 0;
padding: 0;
top: -10px;
}
#controlPanel {
width: 250px;
background-color: red;
float:left;
top: 100px;
margin-bottom: 0;
}
#plateEditor {
position: relative;
overflow: auto;
width: 730px;
float:right;
top: 100px;
margin-bottom: 0;
margin-top: 150px;
}
#plateActual {
border: 1px solid;
width: 403px;
height: 279px;
margin: 0px auto;
pading: 0;
}
#bottom {
width: 980px;
height: 30px;
background:green;
clear: both;
bottom: 0;
margin: 0px auto;
padding: 0;
}
.cell {
float: left;
width: 29px;
height: 29px;
border: 1px dotted;
}
I apologize if my code is messy and unorganized. I am still figuring out how to best keep it organized and generally write it in an acceptable fashion. Thanks a lot for your help.
Update: I've made the change Ando suggested, but I'm still unable to get selectable to work. I've tried changing #plateActual to an ol or ul and appending li.cell instead but that did not work either.
I was wondering if the reason is my css is somehow interfering with it, but I'm not sure how to fix that without destroying the formatting.
The element returned by append will be the element to which the add is performed - in your case plateActual- so you will be adding the cell class to the wrong element.
When you append the cells - you use $('<div/>') - which will translate to "get the elements of type '<div/>' from the dom and move them inside my 'plateActual' element" - you should add without $ as you are creating an element that does not yet exist.
Something like this should work (http://jsfiddle.net/k3YJY/):
for (var i=0; i<5;i++) {
$('#plateActual').append('<div class="cell"/>');
}