i have a problem where for some reason my .js file is not loaded to browser, when other files are. The problem is that the file that should be loaded is important for my "site" to work. Heres code:
var viewModel = new PeopleTableViewModel({
// uncaught reference error Peopetable view model is not defined
pageSize: 25,
current: data.length,
context: document.getElementById('table')
});
var comparator = new Comparators();
function init() {
viewModel.next();
}
Heres my HTML :
<div id="table"></div>
<button onclick="viewModel.prev()">PREV</button>
<button onclick="viewModel.next()">NEXT</button>
<script type="application/javascript" src="scripts/DATA.js"></script>
<script type="application/javascript" src="scripts/Comparators.js"></script>
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
<script type="application/javascript" src="scripts/ListOfPeople.js"></script>
<script type="application/javascript" src="scripts/scripts.js"></script>
<script type="application/javascript" src="scripts/Person.js"></script>
</body>
And PeopleTableViewModel.js:
function PeopleTableViewModel(config) {
var self = this;
self.people = new ListOfPeople();
self.currentPage = 0;
self.pageSize = config.pageSize;
self.context = config.context;
self.next = function() {
//alert('kliknąłeś następny');
self.people.clear();
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.currentPage++;
self.context.innerHTML = self.people.toTable();
}
self.prev = function() {
//alert('kliknąłeś poprzedi');
self.people.clear();
if (self.currentPage - 1 >= 0) {
self.currentPage--;
}
var begin = (self.currentPage) * self.pageSize;
var end = (self.currentPage + 1) * self.pageSize;
getData(begin, end);
self.context.innerHTML = self.people.toTable();
}
self.sort = function(comparer) {
data.sort(comparer);
self.currentPage = 0;
self.next();
}
var getData = function(begin, end) {
if (end > data.length) {
end = data.length;
}
if (begin < 0) {
begin = 0;
}
for (var i = begin; i < end; i += 1) {
self.people.addPerson(data[i]);
}
}
}
Thank you for taking time on my issue !
You made a mistake in the html markup.
<script type="application/javascript" scr="scripts/PeopleTableViewModel.js"></script>
instead of
<script type="application/javascript" src="scripts/PeopleTableViewModel.js"></script>
Related
I'm a university student and I'm working with JsPsych on a Jatos server. Doing an excercise I receive an error about my jspointer.
Exactly the error is:
Uncaught ReferenceError: jsonpointer is not defined at jatos.batchSession.get (jatos.js:774:13) at start:33:25
I really don't know how to solve it, cause with this kind of error I cannot retrieve my Batch Session's data to make my experiment work.
I'll show you also there my code to help you understand (it's just the specific exercise code, cause the hole set of excercises is really more vast and complex):
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title> BENVENUTO </title>
<script src="jatos.js"></script>
<script src="https://unpkg.com/jspsych#7.2.3"></script>
<script src="https://unpkg.com/#jspsych/plugin-html-keyboard-response#1.1.1"></script>
<link href="https://unpkg.com/jspsych#7.2.3/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
body {
background-color: white;
}
</style>
</body>
<script>
var jsPsych = initJsPsych ({
override_safe_mode: true,
on_finish: function(){
jatos.startComponentByPos(nextComponentPosition[componentCounter], data, JSON.stringify(data));
}
});
if (jatos.batchSession.get("level_attenzione") <= 1){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_1).slice(0,3)
};
if (jatos.batchSession.get("level_attenzione") == 2){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_2).slice(0,3)
};
if (jatos.batchSession.get("level_attenzione") > 2){
var attenzione = jsPsych.randomization.shuffle(jatos.studyInput.attenzione_3).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") <= 1){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_1).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") == 2){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_2).slice(0,3)
};
if (jatos.batchSession.get("level_linguaggio") > 2){
var linguaggio = jsPsych.randomization.shuffle(jatos.studyInput.linguaggio_3).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") <= 1){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_1).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") == 2){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_2).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_verbale") > 2){
var memoria_verbale = jsPsych.randomization.shuffle(jatos.studyInput.memoria_verbale_3).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") <= 1){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_1).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") == 2){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_2).slice(0,3)
};
if (jatos.batchSession.get("level_memoria_visiva") > 2){
var memoria_visiva = jsPsych.randomization.shuffle(jatos.studyInput.memoria_visiva_3).slice(0,3)
};
var componentCounter = 0;
var nextComponentPosition = attenzione.concat(linguaggio).concat(memoria_verbale).concat(memoria_visiva)
nextComponentPosition = jsPsych.randomization.shuffle(nextComponentPosition)
nextComponentPosition.splice(nextComponentPosition.length/2, 0, 2)
nextComponentPosition = nextComponentPosition.concat(3);
var data = {
level_attenzione: BatchSession["level_attenzione"],
level_linguaggio: BatchSession["level_linguaggio"],
level_memoria_verbale: BatchSession["level_memoria_verbale"],
level_memoria_visiva: BatchSession["level_memoria_visiva"],
level_gradimento: BatchSession["level_gradimento"]
};
var empty = [];
sessionStorage.setItem("nextComponentPosition", nextComponentPosition);
sessionStorage.setItem("componentCounter", componentCounter);
sessionStorage.setItem('attenzione', empty);
sessionStorage.setItem('linguaggio', empty);
sessionStorage.setItem('memoria_verbale', empty);
sessionStorage.setItem('memoria_visiva', empty);
var instructions = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<h2 style="text-align-center"> Prema il tasto INVIO per proseguire </h2>',
choices: ['Enter'],
};
var timeline = [instructions];
jsPsych.run(timeline);
</script>
</html>
I've tryed to access to the JSONfile to understand where is the error about the missing jsonpointer, but what I obtained is just:
* Getter for a field in the batch session data. Takes a name
* and returns the matching value. Works only on the first
* level of the object tree. For all other levels use
* jatos.batchSession.find. Gets the object from the
* locally stored copy of the session and does not call
* the server.
* #param {string} name - name of the field
* #return {object}
*/
jatos.batchSession.get = function (name) {
var obj = jsonpointer.get(batchSessionData, "/" + name);
return cloneJsonObj(obj);
};
I am using mPDF and other library for generating PDF/ Image from HTML code or file. below I have mentioned my HTML code from which need to generate .JPG or .PNG or .PDF
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://codeclippers.xyz/320x50/app.min.css" />
</head>
<body>
<div id="addsp320x50"></div>
</body>
<script src="http://codeclippers.xyz/320x50/app.min.js"></script>
<script type="text/javascript">
var availbleTitles = ["title1", "title2", "title3", "title"];
var availableVsprite =["https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b40d48_1602501995.jpeg", "https:\/\/dspbanners.s3.amazonaws.com\/creatives\/user_creatives_5f843d6b7e2b0_1602501995.jpeg"];
var availableVicons = [""];
var availbleBasicOptions = [""];
var availbleDescription = [""];
var selectedVsprite = availableVsprite[Math.floor(Math.random() * availableVsprite.length)];
var selectedVicons = availableVicons[Math.floor(Math.random() * availableVicons.length)];
var selectedTitles = availbleTitles[Math.floor(Math.random() * availbleTitles.length)];
var selectedDescription = availbleDescription[Math.floor(Math.random() * availbleDescription.length)];
var selectedBasicOpt = availbleBasicOptions[Math.floor(Math.random() * availbleBasicOptions.length)];
cOptions.isAnimated = true;
cOptions.animatedVariation = "vinfinite-scroll";
cOptions.titleText = selectedTitles;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].backgroundSpriteURL = selectedVsprite;
if(selectedVicons != "") {
cOptions.animationOptions[0].verticalInfiniteAnimation[0].showIcon = true;
cOptions.animationOptions[0].verticalInfiniteAnimation[0].actionIconImage = selectedVicons;
}
cOptions.descrptionText = selectedDescription;
for(const [key, value] of Object.entries(selectedBasicOpt)) {
if(typeof value === 'boolean') {
cOptions[key] = value;
} else {
cOptions[key] = value.replace(/"/g, "").trim()
}
}
renderCreative();
</script>
</html>
Thanks in advance
I want to compare the recent user pattern("userPattern") with the randomly generated pattern("gamePattern").and if userPattern eual to gamepattern I want to enter into next level.
Ho to do that? now I have done up to responding to the user's click.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<h1>Press A Key To Start</h1>
<main>
<button type="button" id="green" class="green box"></button>
<button type="button" id="red" class="red box"></button>
<button type="button" id="yellow" class="yellow box"></button>
<button type="button" id="blue" class="blue box"></button>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
My JS code:
var color = ["green", "red", "yellow", "blue"];
var gamePattern = [];
var userPattern = [];
var level = 0;
function newSequence() {
var randomNumber = Math.floor(Math.random() * 4);
var colorChosen = color[randomNumber];
var audio = new Audio("sounds/" + colorChosen + ".mp3");
audio.play();
$("#" + colorChosen)
.fadeOut(250)
.fadeIn(250);
gamePattern.push(colorChosen);
$("h1").text("Level " + level);
level++;
var userColorChosen;
for (var i = 0; i < $("button").length; i++) {
$("#" + color[i]).click(function () {
userColorChosen = this.id;
userPattern.push(userColorChosen);
var audio = new Audio("sounds/" + userColorChosen + ".mp3");
audio.play();
$("#" + userColorChosen)
.fadeOut(100)
.fadeIn(100);
});
}
}
var call = true;
$(document).keypress(function () {
if (call === true) {
newSequence();
}
call = false;
});
Please help me.
My answer using Jquery for Simon Game:
var color = ["green", "red", "yellow", "blue"];
var gamePattern = [];
var userPattern = [];
var level = 0;
$("button").click(function () {
var userColorChosen = $(this).attr("id");
userPattern.push(userColorChosen);
var audio = new Audio("sounds/" + userColorChosen + ".mp3");
audio.play();
$("#" + userColorChosen)
.fadeOut(100)
.fadeIn(100);
checkAnswer(userPattern.length - 1);
});
function checkAnswer(currentLevel) {
if (userPattern[currentLevel] === gamePattern[currentLevel]) {
if (userPattern.length === gamePattern.length) {
setTimeout(function () {
newSequence();
}, 1000);
}
} else {
$("h1").text("GAMEOVER");
var audio = new Audio("sounds/wrong.mp3");
audio.play();
$("body").addClass("gameover");
setTimeout(function () {
$("body").removeClass("gameover");
}, 100);
startOver();
}
}
function newSequence() {
userPattern = [];
level++;
$("h1").text("Level " + level);
var randomNumber = Math.floor(Math.random() * 4);
var colorChosen = color[randomNumber];
gamePattern.push(colorChosen);
var audio = new Audio("sounds/" + colorChosen + ".mp3");
audio.play();
$("#" + colorChosen)
.fadeOut(250)
.fadeIn(250);
}
var call = true;
$(document).keypress(function () {
if (call === true) {
newSequence();
call = false;
}
});
function startOver() {
level = 0;
gamePattern = [];
call = true;
}
new to js and html. have tried different answers here and many websites but for some reaon my code is still not working. i have created a plugin called mazePlugin.js, another script called test.js and my html file called test.html.
once a button is clicked the test script is invoked, sends an ajax request to my server(checked it works) and upon success it attempts to call my plugin and draw a maze. i know there might be problems with where i define the canvas. but that is not my current issue.
my html
<!DOCTYPE html> <html> <head>
<meta charset="utf-8" />
<title>test page</title> </head> <body>
<p id="paragraph">first paragraph</p>
<p id="paragraph2">2nd paragraph</p>
<input id="button" type="button" value="start game"/>
<form>
Name:<br/>
<input id="name" type="text"/><br/>
Columns:<br/>
<input id="col" type="number"/><br/>
Rows:<br/>
<input id="row" type="number"/> </form>
<script type="text/javascript" src="../Scripts/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../Scripts/mazePlugin.js"></script>
<script type="text/javascript" src="../Scripts/test.js"></script>
</body>
</html>
my plugin
(function($) {
$.fn.maze = function (data) {
var mazeObject = {
draw: function() {
var rows = data["Rows"];
var cols = data["Cols"];
var cellWidth = 300 / cols;
var cellHeight = 300 / rows;
var initialRow = data["Start"]["Row"];
var initialCol = data["Start"]["Col"];
var mazeAsString = data["Maze"];
//draws the maze
var current = 0;
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
if (mazeAsString[current] == '1') {
context.fillRect(cellWidth * j, cellHeight * i, cellWidth, cellHeight);
}
current++;
}
}
//creating players image
var united = new Image();
united.src = "../Style/united.png";
united.onload = function() {
context.drawImage(united, initialRow, initialCol, cellWidth, cellHeight);
}
return this;
}
};
return mazeObject;
};
}(jQuery));
my test.js
$('#button').click(function () {
var canvas = document.createElement('canvas');
canvas.id = "mazeCanvas";
canvas.width = 300;
canvas.height = 300;
canvas.style = "border:2px black solid";
document.body.appendChild(canvas);
var name = $('#name').val();
var rows = $('#row').val();
var cols = $('#col').val();
var context = canvas.getContext("2d");
var mazeObject;
$.ajax({
url: "Http://localhost:52800/api/Maze",
data: { 'name':name, 'rows':rows, 'cols':cols },
success: function (data) {
mazeObject = $.fn.maze(data);
mazeObject.draw();
},
error: function() {
alert('an error has occurred');
}
});
});
the response i get is
test.js:40 Uncaught TypeError: $.fn.maze is not a function
at Object.success (test.js:40)
at fire (jquery-3.2.1.js:3317)
at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)
at done (jquery-3.2.1.js:9272)
at XMLHttpRequest. (jquery-3.2.1.js:9514)
You are incorrectly calling your plugin. It should be:
mazeObject = $.maze(data);
This is the code i'm using:
<?php
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$) |(\.Gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($"http://newsxpressmedia.com/files/radar-simulation-files")) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
$files[] = $file;
$curimage++;
}
}
closedir($handle);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>change picture</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#Timer_Countdown{
background:black;
color:yellow;
font-weight:bold;
text-align:center;
}
</style>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("img").src = images[x];
}
function displayPreviousImage() {
x = (x <= 0) ? images.length - 1 : x - 1;
document.getElementById("img").src = images[x];
}
var images = <?=json_encode($files)?>;
//var images = [];
var x = -1;
var swap_hours = 0;
var swap_minutes = 0;
var swap_seconds = 5;
var down_counter_hours;
var down_counter_minutes;
var down_counter_seconds;
function initTimer() {
down_counter_hours = swap_hours;
down_counter_minutes = swap_minutes;
down_counter_seconds = swap_seconds;
counter = setInterval(switcher, 1000);
}
function restartCounter() {
down_counter_hours = swap_hours;
down_counter_minutes = swap_minutes;
down_counter_seconds = swap_seconds;
}
function switcher() {
down_counter_seconds--;
if (down_counter_hours <= 0 && down_counter_minutes <= 0 && down_counter_seconds <= 0) {
swapColor();
restartCounter();
}
if (down_counter_seconds <= 0 && down_counter_minutes > 0) {
down_counter_seconds = 60;
down_counter_minutes--;
}
if (down_counter_minutes <= 0 && down_counter_hours > 0) {
down_counter_minutes = 60;
down_counter_hours--;
}
document.getElementById("Timer_Countdown").innerText = down_counter_hours+":"+down_counter_minutes+":"+down_counter_seconds;
}
function swapColor() {
displayNextImage();
}
</script>
<div id="div_hours" class="div_box"></div>
<div id="div_minutes" class="div_box"></div>
<div id="div_seconds" class="div_box"></div>
<div id="div_switcher" class="div_box"></div>
</head>
<body onload = "initTimer()">
<div id="Timer_Countdown"> </div>
<img id="img" src="http://newsxpressmedia.com/files/theme/radar000005.Gif">
<button onclick="displayPreviousImage(); restartCounter()">Previous</button>
<button onclick="displayNextImage(); restartCounter()">Next</button>
</body>
</html>
The error is on the line:
var images = <?=json_encode($files)?>;
If i change this line to this line:
var images = [];
Then the code is working fine but without using the php files variable.
Something is wrong with the line: var images = <?=json_encode($files)?>;
I tried to change this line to: echo json_encode($images); or to var images = echo json_encode($files); but same error.
I'm using weebly to build my site and my site server is on ipage.com
How can i fix the error ?
It looks like you don't have short tags enabled(and are using a pre 5.4 php version), thus the line <?=json_encode($files)?> is not parsed by php and is just send straight through. var images = <... is not a valid javascript expression. Here's some information about php's short_open_tag parameter: http://php.net/manual/en/ini.core.php#ini.short-open-tag
A couple of changes. Change
$pattern ="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$) |(\.Gif$)";
to
$pattern = '/\.(png|jpg|jpeg|gif)$/i';
and
eregi($pattern, $file)
to
preg_match($pattern, $file)
and see what happens. eregi deprecated as PHP 5.3.0.
You are using '=' inside the PHP tags. Try this:
var images = <?json_encode($files)?>;