I’m 15 years old and besides from English I also started to study French. I am using a flashcard app which is called as Anki for learning French vocabulary.So I downloaded an awesome deck for enhancing my vocabulary, then I partly redesigned it for my needs.
There are example sentences for most of the cards. On computer it works very well with no mistake. But when it comes to Ankidroid (mobile version of Anki app) it doesn’t show me example sentence section.
For example it is the first view when I look at the backside of my card:
First view
You may see “show exs” button when I click it, it shows up the example French sentence
Here is when I look at the French example sentence:Example french sentence without translation
And when you may see “answer” button pops out when I click “show exs” button.
Here what it looks like when I click answer button:
Translated example french sentence
Please come to me with a solution :) On desktop it has no problem. On Ankidroid media has no problem either. When I check card fields, example sentence section is there. But it doesn’t even appear.
I will be very contented if you can help.
And I don't expect you to know what Anki is etc. I think my problem is because of that Translation is under the untranslated button. If someone who knows html can make "translation" button a separate one just like "wiki" button, it will be solved :)
Here is the code of backside of my card:
<hr id=answer>
{{type:Word with article}} <br>
{{Word with article}} <br> {{Noun declension}}<br>
{{Parisian French Audio (Voice 1)}}
<i><gr>
<div id="aa" style="display:none">
audio: {{Word with declinations}}</div>
</i></gr>
<p>
<div id="basicm">{{Basic meanings of word}}<br></div>
<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>
<div id="buttonsBox">
<button onclick="ShowWikt()">wikt</button>
<button id="button" onclick="ShowExs()" style="display:none">show example</button><br>
<button id="answerButton" onclick="ShowExsTrans()" style="display:none">translation</button><br>
</div>
<span id='a'> </span>
<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>
<script>
// document.getElementById("a").textContent=document.getElementById("exsents").innerHTML.length<1;
var answerShown = 0;
if (document.getElementById("exsents").innerHTML.length <1){
document.getElementById('button').style.display="none";
} else {
document.getElementById('button').style.display="";
}
<!-------><!-------><!-------><!------->
<!--check whether the audio transcript shows or not--!>
var transcript = document.getElementById("tags").innerHTML;
if (transcript.indexOf("adj")>-1){
document.getElementById("aa").style.display = "";
}
<!-------><!-------><!-------><!------->
function ShowWikt() {
document.getElementById("showWikt").style.display = "";
document.getElementById("showExs").style.display = "none";
}
function ShowExs() {
if (document.getElementById("showExs").style.display != "") {
document.getElementById("showWikt").style.display = "none";
document.getElementById("showExs").style.display = "";
if (answerShown == 0) {
document.getElementById("answerButton").style.display = "";
answerShown = 1;
}
}
}
function ShowExsTrans() {
document.getElementById("ExsNoTrans").style.display = "none";
document.getElementById("answerButton").style.display = "none";
document.getElementById("ExsTrans").style.display = "";
}
</script>
<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>
<div id="showWikt" style="display:none">
{{Wiktionary entry}}
</div>
<!------------------------------------------------>
<div id="showExs" style="display:none">
<!---->
<div id="ExsNoTrans">
{{Example sentences without translation}}
</div>
<!---->
<div id="ExsTrans" style="display:none">
{{Example sentences}}
</div>
<!---->
</div>
<!------------------------------------------------>
<!------------------------------------------------>
<span id='exsents' style="display:none">{{Example sentences}}</span>
<div id="tags" style=" display:none">{{Tags}}</div>
I tried to change html by my own but each time I failed.
Related
I am new with ionic framework.Currently i am working on ionicsidemenu app. I want to show records according to date, having date as heading and respective date having multiple records.
For this i have two web services one is for heading date another is for date-wise records. In my HTML file i have two ng-repeat one is for display heading date. Now i am not able to understand how to get records of particular date as date has to be sent to web service for getting records.
I have tried this:
<div ng-repeat="d in dates track by $index">
<h2>d.edate</h2>
<div ng-init="datewiserecords(d.edate);" >
<div ng-repeat="n in res1 track by $index" class="text-white" >
</div></div></div>
but its not working.Please help me.
I am not sure what you are looking for, but the way I understand the question makes me to give you a solution as below:
My Solution:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="get_date in dates">
<h2>{{get_date.date}}</h2>
<h4>{{get_date.data}}</h4>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates = [{date:"1",data:"One"},{date:"2",data:"Two"},{date:"3",data:"Three"}];
});
</script>
</body>
</html>
Hope This is helpful
In my Ionic App, I want to use emojione for smiley in chat. Unfortunately, I didn't find useful documentation to show how to use emojione.
Now I want to create a popup that contain all list of smiley and it's related group. like this:
In downloaded files, There are png sprite of smiley and it's css file, But there isn't any HTML file that show the smiley list.
How can I create this list?
After research two days, I didn't find any answer on internet, So, I wrote the list (that contain all of the emoji with it's category) myself and solve the problem.
In downloaded folder at emojione.com, there is some file that I used to create list:
1. emojione.sprites.css That contain background-position and classname
2. emojione.sprites.png This is a sprite image of all emoji
3. emoji.json Than contain all emoji name,category, unicode and ...
I used ionic tab and angular ng-repeat and groupBy filter in angular-filter
angular-filter: Bunch of useful filters for AngularJS
Important: Use unicode In emoji.json for each emoji classname to show emoji in background of an element(spite).
HTML
<div class="emoji-wrapper">
<div class="tabs">
<a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)">
{{key}}
</a>
</div>
<div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]">
<ul>
<li ng-repeat="emoji in value">
<span class="emojione emojione-{{emoji.unicode}}"></span>
</li>
</ul>
</div>
</div>
JS
$scope.emojies = [];
$scope.tabActive = [];
$scope.tabActive[0] = true;
$http.get("emoji.json").then(function (response) {
angular.forEach(response.data , function ($elem , $index) {
$scope.emojies.push($elem);
});
});
$scope.changeTab = function (index) {
$scope.tabActive = [];
$scope.tabActive[index] = true;
};
I have multiple pages in my one html file.
I trying to implement the pageinit event handler on the second data-role="page".
So I declared pageinit inside it's specific data-role="page".
<div data-role="page" id="foo3" data-dom-cache="false">
<script>
$(document).on('pageinit','#foo3' , function(){
abcsong_file_path = '/android_asset/www/audio/abcsong.mp3';
my_abc = new Media(abcsong_file_path);
my_abc.play();
var i =0;
var time;
function my_loop(){
setTimeout(function (){
var my_alphabets = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
$('#content_loop2').append('<img src="img/alphabets/'+my_alphabets[i]+'.png" />');
i++;
time = 700;
if(i<26)
{
my_loop();
}
}, time)
}
my_loop();
});
</script>
<div data-role="header" data-theme="b">
</div>
<div data-role="content" >
<div id="content_loop2" data-inset="true">
</div>
</div>
<div data-role="footer" >
</div>
</div>
What I expected was that it would initialize everytime I visit this page. But it runs correctly only the first time I open it. Every other time it just show the output of previously executed code.
Please help me how to go about it.
Pageinit should run only once, it was made to be just like document ready.
If you want your code to run every time page is visited then use pageshow or pagebeforeshow.
Read more about it here.
Pageinit should fire only once, according to the docs, but at least in previous versions that was not the actual truth.
I am currently using jQM 1.3.2 and no longer experiencing this problem on Android or in desktop browser. Pay attention to it though, especially if you are also using Phonegap.
Document pageinit fires more than once on iOS (jQueryMobile)
My problem appears on the internal Android browser in combination with JQuery Mobile. When I reload the current page the content shrinks to fit text into the listview.
More in Detail:
The code works fine on IPhone, mobile Desktop Tools and Androids Firefox. However on the internal Android browser I have this weird issue with the code beneath. See my Edit below.
What I've tried so far:
I've played a lot with the viewport meta tag. Anyhow, I don't think that's the problem, because the content gets displayed correct on every other site in my app.
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
like these posts suggest:
JQuery Mobile Device Scaling
Full webpage and disabled zoom viewport meta tag for all mobile browsers
My Code:
<html>
<head>
<meta name="viewport" content="width=650">
<!-- CSS and Scripts-->
</head>
<body>
<!-- Page Wrapper -->
<div data-role="page">
<section data-role="content">
<h2>
Code Sample
</h2>
<div class="ui-grid-solo">
<p style="margin-bottom: 38px;">
A
B
C
</p>
</div>
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
</section>
</div>
</body>
</html>
Has anyone an idea, or did fight with a similar problem?
Edit:
I'm on to something, the problem appears to happen in this peace of code:
<!-- Dynamic content-->
<ul data-role="listview" data-inset="false">
<!-- Use ?id to grab and display data (CodeBehind.vb)-->
</ul>
Normally the listView replaces to big text items with "dot dot dot" at the end so that they fit on the screen. In my case it still does that, but the text has way to many characters, before the shortening is happening. The result is, that everything scales down. How should I solve this?
Since I got no answers on this one, I post my fix:
Only on mobile safari browsers listView items don't seem to get shortened. Now I'm calling a function which does that manually on pageinit:
fixListView: function () {
var brokenAgent = "Safari";
var currentUserAgent = navigator.userAgent;
if (currentUserAgent.indexOf(brokenAgent) != -1) {
var listItemList = $('.long-text');
for (var i = 0; i < listItemList.length; i++) {
var text = listItemList[i].innerText;
if (text.length > 40) {
var newText = text.substr(0, 40);
listItemList[i].innerText = newText + "...";
}
}
}
}
Still not that happy with my fix, any ideas for improvement are welcomed!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How-to store variable beetween jQM pages?
I am new to jquery mobile and a bit confused of sending data to another page. In my html file it consists of listview. when i click on list it needs to redirect to another page and at the same time i want to send data in that list to second page.
Actually my code is..
Polls.html
<body>
<section id="pollsscreen" data-role="page">
<header data-role="header" >
<h1> Video </h1>
Back
</header>
<div data-role="content">
<ul id="pollslist" data-role="listview" data-theme="e" >
</ul>
</div>
</section>
</body>
Polls.js (my javascript file)
var addPollsList = function addPollsList() {
$("#pollslist").prepend("<li><a href='pollsdetails.html'>What is your name?</a></li>");
$("#pollslist").prepend("<li><a href='pollsdetails.html'>Give review of new movie..</a></li>");
$("#pollslist").listview("refresh");
}
pollsdetails.html
<section id="pollsdetailspage" data-role="page">
<header data-role="header">
<h1> Polls </h1>
Back
</header>
<div data-role="content" class="pollsdetailsscreen">
<p>Polls details page</p>
</div>
</section>
</body>
As per the code everything is working good. when i click on list it is redirecting to "pollsdetails.html" file. But here i am not getting any idea how to send the data to that html page and i want to set that data to tag in pollsdetails.html page. can anyone help me with this.......
Thanks in advance...
you can use global variables for this..
In Polls.js
var addPollsList = function addPollsList() {
$("#pollslist").prepend('<li>What is your name?</li>');
$("#pollslist").prepend('<li>Give review of new movie..</li>');
$("#pollslist").listview("refresh");
}
function test1(data){
// set urs global variable here
global_variable = data;
$.mobile.changePage( "pollsdetails.html");
}
function test2(data){
// set urs global variable 2 here
global_variable_2 = data;
$.mobile.changePage( "pollsdetails.html");
}
and in pollsdetails.js you can access global_variable and global_variable_2.
You could use Query string parameters if you are trying to pass simple name-value pairs to the next page.
var addPollsList = function addPollsList() {
$("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value1'>What is your name?</a></li>");
$("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value2'>Give review of new movie..</a></li>");
$("#pollslist").listview("refresh");
}
I would go with Localstorage
var userReview = {
"Name":"Bob",
"Review":"Awesome party movie!!",
"MovieTitle":"Project X"
};
//Store the object in local storage
localStorage.setItem('UserReview',JSON.stringify(userReview));
then you can always call the localstorage to get the info back when you navigate to a different page.
var userReview = JSON.parse(localStorage.getItem("UserReview"));
var userName = userReview.Name;
var review = userReview.Review;
var movieTitle = userReview.MovieTitle;