Help me with my new website!

[bennyboy]

CSS allows you to round all or some of the corners of a div. As far as I know, it doesn't allow you to put a round corner between the header and the navigation bar, yet alone put a conical gradient in it.

It doesn't literally have to be a true conical gradient.  It just has to let the right side of the div match the color of your header, and the bottom side match your navigation bar.  I'm brainstorming ideas how to do that with css.  It seems to me that two overlapping linear gradients with diagonal alpha channels could do it, but in the end just rendering something in Photoshop seems like a better solution to me right now.

---

It's probably a simple enough concept that you could do it with straight-up Javascript.

That's what I intended. However, I've been using so much styling and animation that I've written over 500 lines of code just for an introduction. If I continue like this, the game will probably be 2000 lines long and unplayable because of the distracting animations. It's hard to think of an interface that would make the game playable, that's relatively easy to program and that doesn't look terrible.

The interface you linked looks fine as it is.  I'm not sure why'd you'd need 500 lines of code for it, though.  I think what you want is a procedure for generating "other language" phonemes, putting them into a div, and so on.

This is how big projects like this go for me: I'll daydream for a hundred hours on how I want the thing to work.  Then I'll do the programming for it in a day or two.  Until you have it sorted in your head exactly how everything is going to work, any programming you do should be considered a dry run.

For example, will your "real" phonemes come from a database?  A big text list?  An online dictionary or other source that you will parse in your codebehind?  What criteria will you use for generating "false" phonemes, if any?  Or are you going to set them all by hand in a kind of super-lesson?

btw with regard to your gradient.  Your site is often down when I check it, but how is this?  My idea is to use this in a div background, and just use css to round the corner for you. (This is what happens when I do a conical gradient with Photoshop with the first color at position 0%, and the second at 25%, and then clip the upper-left quadrant)
 

[FlatAssembler]

I'm not sure why'd you'd need 500 lines of code for it, though.

Well, it's more than 200 lines of CSS. And it takes a lot of code to even initialize a good-looking div within Javascript (around 10 lines per div, not counting the CSS formatting). JQuery does help a little, but it's still nothing like working in, let's say, UIKit in Objective-C, where all you need to do to initialize a label is to pass a few arguments to the constructor.
Perhaps the quirkiest problem with JavaScript is that it basically interprets the escape sequences within strings (like '\n' and '\t') as ordinary spaces, and that you need to insert a new element every time you want to make a newline or a tab.

For example, will your "real" phonemes come from a database?

I have already made an algorithm, and it produces fairly convincing results in the text-mode version. It's actually relatively simple: just generate random sound laws, such as "Turn every 't' in the beginning of a word to a 'z'." or "Turn every 'b' between two vowels into a 'v'." or "Turn every 't' after a nasal at the end of a word to a 'd'." or "Delete every 't' at the end of a word." or "If there are three consonants in a row, insert an 'e' after the first one." and then apply them to all the randomly generated roots (strings). Not all sound laws are equally likely ('b' is much more likely to turn into a 'v' than into an 's'), but that's easily solvable by a 2-dimensional array of the phonemes each phoneme is likely to turn into.
The results are slightly less convincing for longer words, because the algorithm assumes that sound laws are always identical for stressed and unstressed syllables (which they aren't), but I've done that on purpose. It ensures that Part #2 of the game is solvable: just generate some consonant-heavy three-syllable root for the example word in each language, and the player can deduce many of the sound changes that occurred in that language from that word alone.
In short, it's all just basic string manipulation.

My idea is to use this in a div background, and just use css to round the corner for you.

But the problem is: there is no obvious way to make a div shaped like a quarter of an ellipse using CSS. Yes, you can set border-bottom-left-radius in pixels. The width of the div would have to be defined in percentages (as is everything else on my page), so we already have a problem. And even if I were to use some JQuery style injection, there is another problem: you can only specify one radius (for a circle), and not two (for an ellipse). Is it a problem to crop those images into a quarter of a circle in Photoshop and save them as a transparent PNG?

[bennyboy]

I'm not sure why'd you'd need 500 lines of code for it, though.

Well, it's more than 200 lines of CSS. And it takes a lot of code to even initialize a good-looking div within Javascript (around 10 lines per div, not counting the CSS formatting). JQuery does help a little, but it's still nothing like working in, let's say, UIKit in Objective-C, where all you need to do to initialize a label is to  pass a few arguments to the constructor.

Maybe if I have time on the weekend I can look at some of your code. Generally, what I would do is have a default div. In JQuery, you would clone it, change the text, and then append it to the right node in the body layout. This is pretty advanced stuff, but if you can gronk it, it will give you almost complete power over the client-side function of the page.

Perhaps the quirkiest problem with JavaScript is that it basically interprets the escape sequences within strings (like '\n' and '\t') as ordinary spaces, and that you need to insert a new element every time you want to make a newline or a tab.

JQuery objects have an inner html property, so you can use '<br/>' if that helps.

My idea is to use this in a div background, and just use css to round the corner for you.

But the problem is: there is no obvious way to make a div shaped like a quarter of an ellipse using CSS. Yes, you can set border-bottom-left-radius in pixels. The width of the div would have to be defined in percentages (as is everything else on my page), so we already have a problem. And even if I were to use some JQuery style injection, there is another problem: you can only specify one radius (for a circle), and not two (for an ellipse). Is it a problem to crop those images into a quarter of a circle in Photoshop and save them as a transparent PNG?

Read this:
https://www.w3schools.com/css/css3_borders.asp

and then this:
https://www.w3schools.com/css/tryit.asp?...er-radius3

In the fiddle screen for the second link, try changing the #rcorners3 div to have something like:
#rcorners3 {
       border-radius: 90% 0 0 0;
       width: 20%;
       height: 300px;
       background-image: url("https://i.imgur.com/3VIMyzi.jpg");
       background-size: 100% 100%;
}

(Click "Run")

If you change the width / height of the div, the border will automatically form a nice 1/4 ellipse for you.  Changing that first 90% value will make it easy to get a nicely-shaped rounded corner i think. (I liked the results with about 90% personally)

[FlatAssembler]

OK, thanks. Like I've said, I come from the world of competitive programming. I know why you should use mergesort instead of heapsort on a linked list or when you should run the Dijkstra's algorithm multiple times instead of one Floyd's algorithm or how to enumerate all the permutations of a string using a stack, but my knowledge of programming graphic interfaces is minimal.

[KevinM1]

For example, will your "real" phonemes come from a database?  A big text list?  An online dictionary or other source that you will parse in your codebehind?  What criteria will you use for generating "false" phonemes, if any?  Or are you going to set them all by hand in a kind of super-lesson?

Someone comes from .NET

[bennyboy]

For example, will your "real" phonemes come from a database?  A big text list?  An online dictionary or other source that you will parse in your codebehind?  What criteria will you use for generating "false" phonemes, if any?  Or are you going to set them all by hand in a kind of super-lesson?

Someone comes from .NET

ROFL busted!

---

OK, thanks. Like I've said, I come from the world of competitive programming. I know why you should use mergesort instead of heapsort on a linked list or when you should run the Dijkstra's algorithm multiple times instead of one Floyd's algorithm or how to enumerate all the permutations of a string using a stack, but my knowledge of programming graphic interfaces is minimal.

You're lucky.  I started learning html about 10 years ago, when every browser was broken in different ways and css never seemed to work right.  You'd have to have all kinds of BS hacks in almost every single page just to get it to work on both FireFox and IE.

[FlatAssembler]

I also started to learn HTML and Javascript some 8-9 years ago, but I gave up. Maybe it's because I was too young, and maybe it's because Javascript and HTML were harder back then. Back then it was a problem to add some colors and animations to the webpage, and today the problem is not to overload your webpage with colors and animations.

[bennyboy]

I also started to learn HTML and Javascript some 8-9 years ago, but I gave up. Maybe it's because I was too young, and maybe it's because Javascript and HTML were harder back then. Back then it was a problem to add some colors and animations to the webpage, and today the problem is not to overload your webpage with colors and animations.

I'd say there are three main considerations now:

1)  You should use the full real estate available to you.  3-column designs with the content taking only half the screen made sense with 4:3 monitors, but not with 16:0
2)  You must have a theme page for small devices like phones.
3)  Visual candy is to be used to draw attention in a pleasant way to important things to click or read-- and must never, ever distract.  Nobody's impressed by bling anymore.

[FlatAssembler]

I really like the way Internet Explorer 6 renders my website. No gradients, no background image, no SVGs, no columns… That would be excellent for small devices, right?

Anyway, in one part of the game, you should click on a row in a "table" (tablica) made out of divs (tablica[i][j]) to swap the cells in that row (to put the content of the cell in the correct column). Here is the relevant piece of code:

Code:

for (var j=0; j<odgovor1.length; j++)
           for (var i=1; i<3; i++)
           {
               tablica[i][j]=document.createElement("div");
               tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
               if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
               else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
               tablica[i][j].style.top=228+27*j;
               tablica[i][j].style.left=-153+110+153*i;
               tablica[i][j].onclick=eval(
                       "(function()"+
                       "{"+
                       "var tmp=tablica[1]["+j+"].style.left;"+
                       "tablica[1]["+j+"].style.left=tablica[2]["+j+"].style.left;"+
                       "tablica[2]["+j+"].style.left=tmp;"+
                       "tmp=odgovor1["+j+"];"+
                       "odgovor1["+j+"]=odgovor2["+j+"];"+
                       "odgovor2["+j+"]=tmp;"+
                       "})"
                       );
               pozadina.appendChild(tablica[i][j]);
           }

When the user clicks on a row in that table, the cells in that row are swapped, and the content of the table is correctly tracked in the string arrays "odgovor1" and "odgovor2". However, they are swapped without any animation, they are swapped immediately. When I try to apply JQuery animations to the cells (divs) "tablica[1][j]" and "tablica[2][j]" (by inserting them into the "eval"), the program crashes. Do you know how to do that properly?
Here is a screenshot if it helps: https://postimg.org/image/t6cofk4f1/
If you have some ideas for the interfaces of the Part #2 and Part #3 of the game that are easy to program, please tell me about them.

[KevinM1]

Your website should be rendered the same* in all browsers. Not having that is a sure sign of doing it wrong. There’s no legitimate reason to favor any particular browser.

*Mobile browsers are somewhat different, but even then you can use one set of code to render your site correctly in a smaller screen. It’s called responsive design, and uses CSS media queries to set the appearance/location of elements based on the size of the browser window. Frameworks like Bootstrap employ the technique.

Regarding your program, what does your browser’s JS console say?