I am preparing for GMAT and hence preparing a question bank. gmatclub.com has lots of question and I was able to write a python script that got the questions and respective answers. While getting the data,I am retaining the HTML formatting as some questions will have underline and bold portion.
I want to develop a desktop application that should read the HTML data (i will use excel or access db as datasource). However I am not sure how to design GUI that will render the HTML formatted data. Any suggestions, on if I can use excel or access user form to show HTML formatted data. Otherwise, if I have to use browser, can I implement the logic without server side scripting that is can I use Javascript to access database(IE allows use of ActiveXobject, however it wont work on chrome and firefox thats what MS site says). The reason for not using server side scripting is, so that I can share the source code with my non-tech friends and they can use it without installing anything.
I would recommend making a very simple web page, all stored in a single file (no server side). If you can get all the HTML for the questions and answers using your python code, use that same code to also write the Q&A into an HTML file that looks like what I have below (I note with comments where you should be writing the Q&A).
I would recommend hard-coding the rest of the html file (i.e. the parts outside the Q&A section) into your python code so that it can print this entire file in one fell swoop. You can then just open this in your browser of choice:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var json = [
//Use Python to write in your Q&A's here
{
"question":"Do you want to take the GMAT",
"answer":"<b>Yes</b>, I do"
},
{
"question":"What is LLC?",
"answer":"Limited Liability <i>Company</i>"
},
//End Q&A section
];
function reset()
{
$('#next').hide();
$('#showAns').show();
$('#a').hide();
ask();
}
function showAnswer()
{
$('#next').show();
$('#showAns').hide();
$('#a').show();
}
reset();
$('#next').click(function(){reset();});
$('#showAns').click(function(){showAnswer()});
function ask()
{
var randNum = Math.floor(Math.random() * json.length);
$('#q').html(json[randNum].question);
$('#a').html(json[randNum].answer);
}
});
</script>
</head>
<body>
<div id="q"></div>
<div id="a"></div>
<button id="showAns">Show Answer!</button>
<br>
<button id="next">Next Question</button>
</body>
</html>
Notes
1) They'll need internet connection to use this, since I make a call to google's jQuery (so it's technically not one page), but you can just download jQuery and call it locally.
2) It sounds like you'll just be getting the list of questions once, so it might actually be quicker to format them in excel into the JSON format and then paste them in the code.
Related
I'm having an issue with embedding Bokeh inline. Particularly, there is an issue with loading the resources from the 'link' tag (refer to html snippet below). For some reason, when I try try to embed a Bokeh plot inline, the following error occurs: 'Failed to load resource: the server responded with a status of 404 (Not Found)', referencing this link - https://cdn.bokeh.org/bokeh/release/bokeh.min.css.map
However, the above address is different from the one I indicate in the link tag (it omits the bokeh version at the end). I have no idea why this error occurs, it's the first time that this happens. I have previously used inline embedding successfully on a number of occasions.
<head>
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.js>
</script>
</head>
EDIT
I am trying to use inline embedding together with jQuery (I would like to display different Bokeh plots without reloading the entire page every time).
When I looked for further error details in the console, I found the following error: "Error rendering Bokeh model: could not find tag with id..."
If it's of any relevance, here is the jQuery script in my html:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
proglang: $('input[name="proglang"]').val(),
}, function(data) {
$("#result").html(data.a);
$("#r").html(data.b);
});
return false;
});
});
</script>
Where 'data.a' and 'data.b' are the Bokeh-generated script and div tags, respectively.
Any suggestions or advice would be much appreciated!
Best guess is that the script is executing first/early, before the <div> is inserted into the DOM. You will need to find a way to guarantee that the <div> is available by the time the the script executes.
As an aside the partial load use case was not really envisioned when the componenent function was created. If you want to do partial loads, it might be better to serve the doc JSON and then calling Bokeh.embed.embed_items directly on from JavaScript somehow. But it would probably take some experimentation and discussion and back and forth to get that working, which SO is not very good for. I'd encourage you you bring this topic to the public Discourse for further discussion.
I wish to do the following things:
Insert external html blocks into new html pages
Use the same html header from one html file for a number of pages, without recreating the header again for all the pages
Please help!
You can use HTML Imports which is part of Web Components:
<head>
<link rel="import" href="/path/to/your/file.html">
</head>
If your page does not have to be pure HTML, you should consider using PHP or a similar server-side language.
There are plenty of options, depends on you:
1) use iframes (a lot problems with responsibility) http://www.w3schools.com/tags/tag_iframe.asp
2) ajax call in javascript, load external resource and then print it in placeholder tag (example is with jquery) http://www.w3schools.com/jquery/jquery_ajax_load.asp
3) use some server language/preprocessor (php, ruby, nodejs), depend if you can (need to by installed on server)
4) also there are static page generator, you add marks in your html, and they will compile html with marks to full static html http://hyde.github.io/ for example.
What you are talking about appears to be a process called templating. There are many ways to do this, including writing Javascript to insert pre-written HTML templates into the DOM (the webpage). You might also consider using a pre-written templating library such as http://handlebarsjs.com/ or another library which contains templating functions like http://underscorejs.org/. A simple MVC guide like:
http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html
May be helpful too, to get you started.
In a more practical sense, here's one possible solution:
To begin I would recommend putting the 'blocks' you want to insert in a separate folder. In the website I run, for example, I place them in the \templates folder (or subfolders) but you can more or less call it what you want as long as it makes sense to you. For our purposes let's say we've created block.html and put it in our \templates subfolder...
Now, within each template you will have whatever you want to load in; something like this:
<h2>Title of section</h2>
<p>My text.</p>
Or whatever you'd like. Then, you'll probably want to add an element to your main page which calls some Javascript, which loads your HTML template in when a particular condition occurs. For example, if you wanted to load in our block.html file you might write something like this:
<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>
Which would call a Javascript function called 'menuClicked()' when we click the div with the id 'calling-block'.
Within the function we would write something like this:
<script>
function menuClicked(insertEl, UrlString, onTemplateLoaded) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(insertEl).innerHTML = xhttp.responseText;
if (onTemplateLoaded) onTemplateLoaded();
};
};
console.log(UrlString);
xhttp.open("GET", UrlString, true);
xhttp.send();
};
</script>
This is a very simple way of doing things and I'm sure people will tell you there are problems with it, so I would definitely recommend doing your own reading as well, but I hope this covers the very basics.
You need tu use a server side functionality like php, aspx ...
I've used StackOverflow for long but I've never had to ask because there is a lot of already answered questions.
Now I am stuck in a Matlab problem I cannot solve:
I am working with Google Trends and I need to download a CSV file with Matlab, as the one you can download from the following link:
https://www.google.com/trends/trendsReport?hl=es&q=dji&tz=Etc%2FGMT-2&content=1&export=1
which is easy to get from its page ( https://www.google.es/trends/explore#q=ford )
My problem is:
I can download it with any browser, even Matlab web browser works, however I haven't found a way to automatize that download.
I have tried with urlread() and I get an HTML file instead of a CSV file:
<html><head><title>Redireccionando</title>
<script type="text/javascript" language="javascript">
// Accessing window.external members can cause IE to throw exceptions.
// Any code that acesses window.external members must be try/catch wrapped
/** #preserveTry */
try {
if (top == self) {
if (window.gtbExternal) {
window.gtbExternal.setM();
} else {
window.external.setM();
}
}
}
catch(err) {
}
</script>
<meta http-equiv="refresh" content="0; url='https://www.google.com/trends#q=dji&hl=es&tz=Etc/GMT-2&content=1'"></head>
<body bgcolor="#ffffff" text="#000000" link="#0000cc" vlink="#551a8b" alink="#ff0000"><script type="text/javascript" language="javascript">
location.replace("https://www.google.com/trends#q\x3ddji\x26hl\x3des\x26tz\x3dEtc/GMT-2\x26content\x3d1")
</script></body></html>
I have also tried with urlread2() which I found around here, and also with a downloadUrl() function that looks like it is based on Java, but my Java knowledge is tiny and I have no idea of what that function does or if I can modify it to suit my problem.
I'm sure someone has already solved that problem in Matlab but I have not been able to find a solution on my own by now. I guess that it is something related to the GET method which I do not know how to handle properly.
If you don't mind your code opening up a window in your system browser, you can automate the download by
url = 'https://www.google.com/trends/trendsReport?hl=es&q=dji&tz=Etc%2FGMT-2&content=1&export=1'
web(url, '-browser');
The problem with using urlread (or webread, which is preferred) is that your link doesn't actually point to the CSV file you want to download; it points to a webpage which contains redirection Javascript. That page is what you see above when you run urlread. When you load this in a browser, the Javascript is executed, which redirects to another page and ultimately the CSV file is generated. But urlread and webread will not execute the Javascript. As far as I know, Matlab can't execute Javascript directly, hence you may need to open a browser to execute the Javascript and generate the CSV file.
I'm totally new to RESTful API and html and was wondering if I could get some advice.
Basically, I've made an application with a restful api using RestX, see picture, that can succesfully retrieve info, like a list of strings with node addresses.
And I want to make a HTML page that looks roughly like this (mockup):
I'm totally unsure how to actually do this however. Also, I'm unsure of how to display, for example, the list of strings I've received. In the mockup, the list of registered nodes should dynamically be made from the list received from the application, for example.
I've made a sample HTML text file (from another overflow post), but that doesn't really do anything...
See code:
<!DOCTYPE html>
<html>
<head>
<script src="the/Path/To/The/Downloaded/JQuery.js"></script>
<script>
//Usually, you put script-tags into the head
function myFunction() {
//This performs a POST-Request.
//Use "$.get();" in order to perform a GET-Request (you have to take a look in the rest-API-documentation, if you're unsure what you need)
//The Browser downloads the webpage from the given url, and returns the data.
$.get( "http://192.168.59.130:8080/api/#/ui/api-docs/#/operation/list/GET/___list___nodes", function( data ) {
//As soon as the browser finished downloading, this function is called.
$('#demo').html(data);
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I'm lost, can anybody help?
Currently you are not using the REST APIs, but the URLs to access Restx UI interface.
The first thing you should do is to update the URL you are using to something like: http://192.168.59.130:8080/api/list/nodes
You'll get back a list of entities (at least, that's what the name of the API method suggests) in json that you can use in your javascript to populate the HTML form.
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!