when i try to upload the file i get this message:
You must include a bundle config in your upload. To create a bundle config, please refer to:
https://developers.facebook.com/docs/games/instant-games/sdk/bundle-config.
You must include a bundle config in your upload.
To create a bundle config, please refer to:
this is my index.html file,
I added the code to the index,htmk file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/asset/boostrap/bootstrap.min.css">
<link href="/asset/css/index.css" rel="stylesheet">
<title>Trắc nghiệm lịch sử</title>
</head>
<body>
<div class="vh-100 vw-100 d-flex justify-content-center">
<div class="position-relative contai h-100 bg-secondary p-2">
<div class="px-2 d-flex justify-content-between">
<div>
<strong class="text-warning">Quiz</strong>
</div>
<div>
<span class="text-warning">icon</span>
</div>
</div>
<div class="px-2 pt-5">
<div class="" id="question">
<h5 class="text-white"></h5>
</div>
</div>
<div class="pb-4 position-absolute bottom-0 start-0">
<div class="p-3 row gx-0 g-3" id="option_answer">
<!-- <div class="col-6"><button type="button">Lý Nam Đế</button></div> -->
</div>
<div class="w-100 text-center">
<button type="button" id="submit_answer" >Gửi Đáp án</button>
<button type="button" id="next_question" >Tiếp tục</button>
</div>
</div>
<div></div>
</div>
</div>
<script src="https://connect.facebook.net/en_US/fbinstant.7.0.js"></script>
<script src="./fbLoader.js"></script>
</body>
</html>
add fbapp-config.json
`{
"instant_games": {
"platform_version": "RICH_GAMEPLAY",
"orientation": "LANDSCAPE",
"navigation_menu_version": "NAV_FLOATING"
}
}``
Related
I am trying to make a login page for my project I am working on and I came across this error while trying to run the code. I have no idea what is causing it.
Here is my code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JAuth Login</title>
<link href="https://fonts.googleapis.com/css?family=Karla:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.8.95/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/login.css">
</head>
<body>
<script>
//firebase stuff
//Login
//Authentication
//login
function login() {
var userEmail = document.getElementById("email").value;
var userPass = document.getElementById("password").value;
window.alert(userEmail + " " + userPass);
}
</script>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="assets/images/login.jpg" alt="login" class="login-card-img">
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="assets/images/Jauth.png" alt="logo" class="logo">
</div>
<p class="login-card-description">Sign into your account</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email address">
</div>
<div class="form-group mb-4">
<label for="password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="***********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4" type="button" value="Login" onclick="login()">
<input name="register" id="register" class="btn btn-block login-btn mb-4" type="button" value="Register">
</form>
Forgot password?
<nav class="login-card-footer-nav">
Terms of use.
Privacy policy
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
That was the full script.
When I run the code and go to chrome, I keep finding an error saying: TypeError: login is not a function at HTMLInputElement.onclick (VM188 index.html:76) onclick # VM188 index.html:76
Do you know what is happening?
Thanks
I am developing a simple game (similar to Blockly and Scratch) that involves drag-and-drop. After dragging the buttons to a target container, I want to be able to clear the content of that container by pressing a Reset button. I have tried to implement it (which is demonstrated in the code below) but to no avail.
Here are the relevant codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Maze - Zoom Zoom</title>
<script src="{{ url_for('static',filename='vendor/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/sb-admin-2.min.js') }}"></script>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordion_sidebar">
<!-- Commands -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3">Commands</div>
</a>
<div class="commands">
<div class="draggable">
<input type="button" class="btn-forward" id="forward" value="Forward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-backward" id="backward" value="Backward" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-right" id="right" value="Right" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-left" id="left" value="Left" draggable="true"></button>
</div>
<div class="draggable">
<input type="button" class="btn-repeat" id="repeat" value="Repeat" draggable="true"></button>
</div>
</div>
</ul>
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xl-12 col-lg-12">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row">
<div class="col">
<div class="container" id="commands"></div>
<button id="reset" class="btn btn-lg btn-primary" value="Reset"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" \
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" \
crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$("#commands").empty();
});
});
</script>
</html>
You can make divs' appear or disappear using vanilla javascript only.
A simple example below:
<div id="container">This is Div's content</div>
<reset id="resetButton" value="Reset">Reset</reset>
<script>
resetButton.addEventListener('click', () => {
container.innerHTML = '';
// Or container.style.display = 'none'; if you want container to disappear without leaving space
// Or container.style.visibility = 'hidden'; if you want container to disappear leaving space
});
</script>
Changed to:
<reset id="reset" class="btn btn-lg btn-primary" value="Reset">Reset</reset>
<script type="text/javascript">
$(document).ready(function()
{
$("reset").click(function()
{
$("#commands").empty();
});
});
</script>
I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks
<%# taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library Management</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<jsp:include page='menu.jsp'></jsp:include>
<main>
<section class="content">
<div class="page-announce valign-wrapper">
<i class="material-icons">menu</i>
<h1 class="page-announce-text valign">Fiche livre</h1>
</div>
<div class="row">
<div class="container">
<h5>Crèation d'un nouveau livre</h5>
<div class="row">
<form action="livre_add" method="post" class="col s12">
<div class="row">
<div class="input-field col m12 s12">
<input id="titre" type="text" name="titre">
<label for="titre">Titre</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="auteur" type="text" name="auteur">
<label for="auteur">Auteur</label>
</div>
<div class="input-field col s6">
<input id="isbn" type="text" name="isbn">
<label for="isbn">ISBN 13</label>
</div>
</div>
<div class="row center">
<button class="btn waves-effect waves-light" type="submit">Enregistrer</button>
<button class="btn waves-effect waves-light orange" type="reset">Annuler</button>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<jsp:include page='footer.jsp'></jsp:include>
</body>
</html>
That's a file in .jsp that is a class to visualize one function of the program .
I have a problem when I open the browser, the accents are decoded as not found even if I have used a UTF-8 charset and statement to print Crèation d'un nouveau livre .
I'm having a hard time in this code. its repeating when its already chosen and i want to add data in DB when its already chosen
When I click spin the randomizer will choose the name and that name will update his status to done and it will not choose when I click again the spin button.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Binggo</title>
<meta charset="utf-8">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="app" ng-controller="app" onload="localStorage.clear()">
<div class="jumbotron text-center">
<h1>Title is here</h1>
<p>Sub details will be printed out here</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<img class="left-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="left-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-6">
<img class="middle-img card-img-top" style="width:50%; margin-left:25%;" src="data:image/jpeg;base64,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" alt="Card image cap">
<h3 class="middle-text" style="text-align:center;"></h3>
</div>
<div class="col-sm-12">
<div class="col-sm-12 less"><br>
<textarea name="remarks" class="remarkss" style="width:50%; margin-left:25%; margin-top:5%;" placeholder="Enter your remarks here !" rows="8"></textarea><br>
<center><button class="btn btn-primary send">Done</button></center>
</div>
<center><button class="btn btn-success" ng-click="spin()">Spin</button></center> <br>
</div>
</div>
</div>
</body>
</html>
you're using ng-click but Angular is not imported in this HTML.
try onclick, if it fits with the way spin function is defined.