Hello I need some help in developing a quiz using HTML.
Here is the code, if you require pictures I can provide them, I need some help getting the score counter to count over around 10 pages, and it keeps the right score so for a correct answer it will be 1, for a wrong answer it will be -0.25. Thanks.
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>
You can use localStorage to store data in the client's web browser. Data saved using localStorage has no expiry date. It will stay there intact unless deleted. You can read about localStorage here
You can do something like this.
First, calculate the score on the first page.
Assuming you have some kind of button click or simply a click on an element to navigate to the next page. You can add an event listener to this element using JavaScript. This event listener will execute a function which will first, calculate the result on the first page and then store it in the web browser using localStorage like this localStorage.setItem("score", quizScore);
After navigating to the next page you can run a function when the page completely loads that retrieves this score using this var score = localStorage.getItem("score");
Then you can display the current score, carry on with the quiz, calculate the result, add it to the previous score, update the key score value, and repeat the first, second, third, and fourth steps for all the future pages again until you have calculated the final score of the quiz.
Lastly, you can retrieve the final value, show it to the client in whatever way you like, and delete it using localStorage.removeItem("score"); if you wish to.
localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js fiddle
Related
I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.
The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).
I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
</head>
<body>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
</body>
</html>
```
You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.
So you would use some time https://www.website.com/#title1
// Check if URL of browwser window has hash tag
if (location.hash) {
// Get URL hash tag
const hash = window.location.hash;
// Select checkbox with ID of hashtag
const checkbox = document.querySelector(hash);
// Check if checkbox exists
if(checkbox) {
// Set selected checkbox as checked
checkbox.checked = true;
}
}
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
My Content 1
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
My Content 2
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
My Content 3
</div>
I'm prompting a user for information in a google doc via the Script Editor, and I've gotten it to work in a test document, but when I try to copy it over to another it doesn't pop up.The first one didn't require a developer key to work, although I set it up in my Google Cloud Platform console as part of troubleshooting. It's supposed to push a popup form when the user opens the google doc, but in the second document nothing shows up unless you hit Run. The user should not be accessing the Script Editor, so this is not ideal.
Any ideas on why this is happening? Thanks in advance
function onOpen() {
showPicker();
}
var VALUE;
function showPicker() {
var html = HtmlService.createHtmlOutputFromFile("login.html");
DocumentApp.getUi().showModalDialog(html, " ");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145078782-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145078782-1');
</script>
<style>
header {
background: black;
padding: 10px 20px;
}
header h1, header a {
margin: 0px;
text-decoration: none;
color: white;
}
body {
margin: 0;
padding: 0;
background-size: cover;
font-family: sans-serif;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;
box-sizing: border-box;
border: 1px solid #dadce0;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.box h2 {
margin: 0px 0 -0.125rem;
padding: 0;
color: #fff;
text-align: center;
color: #202124;
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
font-size: 24px;
font-weight: 400;
}
.box p {
font-size: 16px;
font-weight: 400;
letter-spacing: .1px;
line-height: 1.5;
margin-bottom: 25px;
text-align: center;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 93%;
padding: 0.625rem 10px;
font-size: 1rem;
letter-spacing: 0.062rem;
margin-bottom: 1.875rem;
border: 1px solid #ccc;
background: transparent;
border-radius: 4px;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 10px;
padding: 0.625rem 0;
font-size: 1rem;
color: grey;
pointer-events: none;
transition: 0.5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label,
.box .inputBox input:not([value=""]) ~ label {
top: -1.125rem;
left: 10px;
color: #1a73e8;
font-size: 0.75rem;
background-color: white;
height: 10px;
padding-left: 5px;
padding-right: 5px;
}
.box .inputBox input:focus {
outline: none;
border: 2px solid #1a73e8;
}
.box input[type="submit"] {
border: none;
outline: none;
color: #fff;
background-color: #1a73e8;
padding: 0.625rem 1.25rem;
cursor: pointer;
border-radius: 0.312rem;
font-size: 1rem;
float: right;
}
.box input[type="submit"]:hover {
background-color: #287ae6;
box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3);
}
.popup-without-close .ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
display: none;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script>
function SubForm() {
$.ajax({
url:'https://api.apispreadsheets.com/data/10050/',
type:'post',
data:$("#myForm").serializeArray()
});
closeDialog();
}
var x = document.getElementById("myForm");
function closeDialog() {
x.closeDialog();
}
</script>
</head>
<body>
<div class="box">
<h2>Sign in</h2>
<p>Use your Provided Credentials</p>
<form id="myForm">
<div class="inputBox">
<input type="email" name="email" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="text" name="password" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Password</label>
</div>
<button onclick="SubForm()" id="submit">Submit</button>
</form>
</div>
</body>
</html>
It looks like you need an Installed trigger
In a nutshell, simple triggers, like using onOpen without installing it, can be copied with the sheet and it will work "out the box". However, they are very restricted and so, this is why it won't have access to the UI, i.e. a popup.
To install the trigger on the new sheet, you need to open the script editor. Once you are at the editing screen, to the left, click on the triggers icon.
Once there, you can:
It will ask you what function you want to run when the trigger is triggered, and what type of trigger you want it to be (choose onOpen) - then it will likely ask for authorization, which you should grant.
For more details:
Simple triggers
Installable triggers
I am creating a list of elements from user inputs. Each element in this list comes with a dynamically created button within my JavaScript.
I am trying to have it so that when I click on this dynamically created button ("started"), it will automatically remove the entire list element from the original li and move it to the top of another li.
My code: [EDIT: For some reason, my code snippet doesn't show the second list "doing" but it shows in my local console, not sure if it's problem with my code?]
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$(".addedTask").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').append($('#todo-list'( completedItem)).removeClass(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Here is an image of what it looks like on my end:
You're using the wrong selector .addedTask for the Event delegation.
Use prepend function to add the element at the top.
To test this snippet, click on Full Page after you click 'Run code snippet'
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started'>Started</button>" + text + '</li>' + '</br>');
}
})
);
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
/* cursor: pointer;*/
}
li:hover {
background: #ddd;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
}
#started {
float: left;
background-color: white;
border-radius: 6px;
}
.column {
background-color: #E3E3E3;
min-height: 100px;
width: 25%;
box-shadow: 1px 1px 3px $shadow;
display: inline-block;
position: asolute;
margin: 5px;
vertical-align: top;
position: relative;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
bottom: .5px;
color: #393939;
margin: 5px;
}
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
<html>
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js">
</script>
</body>
</html>
Since you are adding HTML to the DOM later, the code $(".addedTask").on('click', "button", function() { will not work because at the time of execution this code there was no .addedTask elements.
You may instead want to delegate this to a higher node in the DOM. One easy way to accomplish this would be to rewrite this as
$("document").on('click', ".addedTask button", function() {
This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>
Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>
I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help
I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun